Favicon Gen
Generate custom favicons from logos, text, or brand colours.
Install
npx skills add jezweb/claude-skills --skill favicon-gen -g -a claude-code -y- Repository
- jezweb/claude-skills1.1k
- Category
- Mobile
- Updated
- 26d ago
- License
- MIT
- Context cost
- Lightabout 917 tokens
- Runs scripts
- No, instructions only
What it does
Generate custom favicons from logos, text, or brand colours. Produces favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, and web manifest. Use whenever the user wants a favicon, mentions replacing a CMS default favicon, converting a logo into a favicon, creating branded initials icons, or troubleshooting favicon not displaying / iOS black square / missing manifest.
Favicon Generator
Generate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code.
Workflow
Step 1: Choose Your Approach
Have a logo with an icon element?
YES -> Extract icon from logo
NO -> Have text/initials?
YES -> Create monogram favicon
NO -> Use branded shape
Step 2: Create Source SVG
Extracted icon, copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes.
Monogram, use a template from assets/:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" fill="#0066cc"/>
<text x="16" y="21" font-size="16" font-weight="bold"
text-anchor="middle" fill="#ffffff" font-family="sans-serif">AC</text>
</svg>
Branded shape, circle (universal), rounded square (modern), shield (security), hexagon (tech).
SVG templates available in assets/ directory.
Step 3: Generate All Formats
Requires ImageMagick (convert command). Install if needed: brew install imagemagick (macOS) or apt install imagemagick (Linux).
# ICO (16x16 + 32x32)
convert favicon.svg -define icon:auto-resize=16,32 favicon.ico
# Apple Touch Icon (180x180, SOLID background, transparent = black on iOS)
convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png
# Android/PWA icons
convert favicon.svg -resize 192x192 icon-192.png
convert favicon.svg -resize 512x512 icon-512.png
No ImageMagick? Use https://favicon.io to convert from the SVG instead.
