Favicon Gen

Generates the full favicon stack from a logo, brand initials, or just hex colors. You get SVG, ICO, Apple touch icons, Android PNGs, and a web manifest with proper HTML integration code. The workflow is smart about the iOS transparency trap (transparent backgrounds render as black squares, so it forces solid fills on apple-touch-icon.png). Uses ImageMagick for conversion or falls back to favicon.io if you don't have it installed. The monogram templates are genuinely useful if you're starting from scratch or dealing with a client who only has a wordmark. Beats manually exporting five formats and Googling which sizes Android actually needs.

skills.sh installs: 2.3K
GitHub stars: 1.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add jezweb/claude-skills --skill favicon-gen --agent claude-code

Installs into .claude/skills of the current project.

Files

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.