Claude-skills favicon-gen

install

source · Clone the upstream repo

git clone https://github.com/jezweb/claude-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/jezweb/claude-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/plugins/design-assets/skills/favicon-gen" ~/.claude/skills/jezweb-claude-skills-favicon-gen && rm -rf "$T"

manifest: plugins/design-assets/skills/favicon-gen/SKILL.md

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