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.
Security Assessment
About favicon-gen
The favicon-gen skill generates a complete favicon package from a logo, initials, or brand colours, producing all required formats and the HTML integration code. It is useful whenever a user wants a favicon, is replacing a CMS default, converting a logo, creating branded initials, or troubleshooting issues like an iOS black square or a missing manifest.
It walks through choosing an approach (extract an icon from a logo, create a monogram, or use a branded shape), creating a source SVG (with templates for circle, square, and shield), and generating every format with ImageMagick: favicon.ico, a 180x180 apple-touch-icon, and 192 and 512 PNGs, falling back to favicon.io when ImageMagick is unavailable. It then creates a web manifest and the link and meta tags to add to the page. It enforces critical rules such as generating all formats, giving iOS icons solid backgrounds (transparent renders as a black square), using bold monogram text, and testing legibility at 16x16.
It is most useful for web developers and site owners who need a correct, cross-platform favicon set quickly, including the manifest and HTML wiring.
FAQ
What does this skill produce?
A complete favicon package: favicon.svg, favicon.ico, apple-touch-icon.png, icon-192 and icon-512 PNGs, a web manifest, and the HTML link and meta tags.
What does it need to generate the formats?
ImageMagick (the convert command); if it is unavailable, it falls back to converting the SVG via favicon.io.
Why must iOS icons have solid backgrounds?
Because a transparent apple-touch-icon renders as a black square on iOS, so the skill removes transparency and applies a solid background.
What source options are supported?
Extracting an icon from a logo, creating a monogram from initials, or using a branded shape such as a circle, rounded square, shield, or hexagon.
How do I make a monogram legible at small sizes?
Use bold font weight (regular weight disappears at 16x16) and test legibility at 16x16, simplifying if needed.
All Files
9 filesInstall favicon-gen
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
jezweb/claude-skills