Favicon gen

Skill jezweb/claude-skills/plugins/design-assets/skills/favicon-gen

Skills for Claude Code CLI such as full stack dev Cloudflare, React, Tailwind v4, and AI integrations.

Install

npx -y skills add jezweb/claude-skills --skill favicon-gen

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

4.1 KB, as published. Nobody here has run it

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.

Step 4: Create Web Manifest

Copy and customise assets/manifest.webmanifest:

{
  "name": "Your Business Name",
  "short_name": "Business",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0066cc",
  "background_color": "#ffffff",
  "display": "standalone"
}

Step 5: Add HTML Tags

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0066cc">

Place all files in site root (/public/ in Vite/React).

Critical Rules

Always generate ALL formats — SVG, ICO, apple-touch-icon, 192, 512, manifest
iOS icons MUST have solid backgrounds — transparent = black square
Always use bold font weight for monogram text (regular disappears at 16x16)
Test at 16x16 — if it's not legible, simplify
Never launch with CMS defaults (WordPress "W", etc.)

Format Quick Reference

Format	Size	Transparency	Purpose
`favicon.svg`	Vector	Yes	Modern browsers
`favicon.ico`	16+32	Yes	Legacy browsers
`apple-touch-icon.png`	180x180	No	iOS home screen
`icon-192.png`	192x192	Yes	Android
`icon-512.png`	512x512	Yes	PWA

Asset Files

assets/favicon-svg-circle.svg — Circle monogram template
assets/favicon-svg-square.svg — Rounded square template
assets/favicon-svg-shield.svg — Shield template
assets/manifest.webmanifest — Web manifest template

Reference Files

references/format-guide.md — Complete format specifications
references/extraction-methods.md — Logo icon extraction steps
references/monogram-patterns.md — Advanced monogram design
references/shape-templates.md — Industry-specific shapes with SVG code