favicon-gen
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.
npx skills add jezweb/claude-skills --skill favicon-gen --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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/`: ```xml <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). ```bash # ICO (16x16 + 32x32) convert favicon.svg -define icon:auto-resize=16,32 favicon.ico # Apple Touch
- Workflow
- Step 1: Choose Your Approach
- Step 2: Create Source SVG
- Step 3: Generate All Formats
- Step 4: Create Web Manifest
- Step 5: Add HTML Tags
- Critical Rules
- Format Quick Reference
- Asset Files
- Reference Files
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
What does the favicon-gen skill do?
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.
How do I install it?
Run `npx skills add jezweb/claude-skills --skill favicon-gen --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jezweb/claude-skills, a repository with 954 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.