Generate custom favicons from logos, text, or brand colors - prevents launching with CMS defaults. Extract icons from logos, create monogram favicons from initials, or use branded shapes. Outputs all required formats: favicon.svg, favicon.ico, apple-touch-icon.png, and web app manifest. Use when: initializing new websites, replacing WordPress/CMS default favicons, converting logos to favicons, creating branded icons from text only, or troubleshooting favicon not displaying, iOS icon transparency, or missing manifest files.
Status: Production Ready ✅ Last Updated: 2026-01-14 Dependencies: None (generates pure SVG/converts to ICO and PNG) Latest Versions: N/A (no package dependencies)
Do you have a logo with an icon element?
├─ YES → Extract icon from logo (Method 1)
└─ NO
├─ Do you have text/initials?
│ ├─ YES → Create monogram favicon (Method 2)
│ └─ NO → Use branded shape (Method 3)
When to use: Logo includes a standalone icon element (symbol, lettermark, or geometric shape)
# 1. Identify the icon element in your logo SVG
# 2. Copy just the icon paths/shapes
# 3. Center in 32x32 viewBox
# 4. Simplify for small sizes (remove fine details)
Example: Logo with rocket ship → Extract just the rocket shape
When to use: Only have business name, no logo yet
# 1. Choose 1-2 letters (initials or brand abbreviation)
# 2. Pick shape template (circle, rounded square, shield)
# 3. Set brand colors
# 4. Generate SVG
Example: "Acme Corp" → "AC" monogram in circle
When to use: No logo, no strong text identity, need something now
# 1. Choose industry-relevant shape
# 2. Apply brand colors
# 3. Generate SVG
Example: Tech startup → Hexagon with gradient
✅ Generate ALL required formats:
favicon.svg (modern browsers, scalable)favicon.ico (legacy browsers, 16x16 and 32x32)apple-touch-icon.png (180x180, iOS)icon-192.png (Android)icon-512.png (Progressive Web Apps)✅ Use solid backgrounds for iOS (transparent = black box on iOS)
✅ Test at 16x16 (smallest display size)
✅ Keep designs simple (3-5 shapes max, no fine details)
✅ Match brand colors exactly
❌ NEVER use CMS default favicons (WordPress "W", Wix, Squarespace, etc.)
❌ Don't use transparent backgrounds on iOS icons (appears as black square)
❌ Don't use complex illustrations (illegible at small sizes)
❌ Don't skip the web manifest (required for PWA, Android home screen)
❌ Don't forget the ICO fallback (still needed for IE/legacy)
For extracted logo icons:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<!-- Extracted icon paths here -->
<!-- Keep design simple, center in viewBox -->
<!-- Use brand colors -->
</svg>
For monogram favicons (use templates in templates/):
<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>
Key Points:
Using online converter (recommended for simplicity):
favicon.svgfavicon.icoUsing ImageMagick (if available):
convert favicon.svg -define icon:auto-resize=16,32 favicon.ico
Apple Touch Icon (180x180, solid background):
# Using ImageMagick
convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png
# Or manually in Figma/Illustrator:
# 1. Create 180x180 artboard with solid background color
# 2. Center icon at appropriate size (~120x120)
# 3. Export as PNG
Android/PWA Icons (192x192 and 512x512):
convert favicon.svg -resize 192x192 -background transparent icon-192.png
convert favicon.svg -resize 512x512 -background transparent icon-512.png
CRITICAL: iOS icons MUST have solid backgrounds. Android/PWA icons can be transparent.
Create site.webmanifest (or manifest.json):
{
"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"
}
<head>):<!-- Modern browsers (SVG preferred) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Legacy fallback (ICO) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Apple Touch Icon (iOS) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Web App Manifest (Android, PWA) -->
<link rel="manifest" href="/site.webmanifest">
<!-- Theme color (browser UI) -->
<meta name="theme-color" content="#0066cc">
Order matters: SVG first (modern browsers), ICO second (fallback)
File locations: All files should be in site root (/public/ in Vite/React)
✅ Good candidates:
❌ Difficult candidates:
At 16x16 pixels, details disappear:
Example: Detailed rocket → Simple triangle + circle + flame shapes
| Business Name | Monogram Options | Best Choice |
|---|---|---|
| Single word (Acme) | A, AC, AM | A (cleanest) |
| Two words (Blue Sky) | B, BS, BSK | BS (both initials) |
| Three words (Big Red Box) | B, BR, BRB | BR (drop last initial) |
| Acronym (FBI, NASA) | FBI, NASA | Use full acronym |
Rule of thumb: 1 letter > 2 letters > 3 letters (simpler is better at small sizes)
Font size by letter count:
Font family: Use web-safe sans-serif fonts
font-family="Arial, sans-serif" (most reliable)font-family="Helvetica, sans-serif" (clean)font-family="Verdana, sans-serif" (readable at small sizes)Font weight: Always use font-weight="bold" or font-weight="700" (regular weight disappears at 16x16)
Use templates in templates/ directory:
favicon-svg-circle.svg) - Universal, safe choicefavicon-svg-square.svg) - Modern, matches iOSfavicon-svg-shield.svg) - Security, protection industries| Industry | Recommended Shape | Color Palette |
|---|---|---|
| Technology | Hexagon, Circle | Blue (#0066cc), Teal (#00a896) |
| Finance | Square, Shield | Dark blue (#003366), Green (#00733b) |
| Healthcare | Circle, Cross | Medical blue (#0077c8), Green (#00a651) |
| Real Estate | House outline, Square | Earth tones (#8b4513), Blue (#4a90e2) |
| Security | Shield, Lock | Dark blue (#1a237e), Red (#c62828) |
| Food/Restaurant | Circle, Rounded square | Warm colors (Orange #ff6b35, Red #d62828) |
| Creative/Agency | Abstract shapes | Bold colors (Purple #7209b7, Pink #f72585) |
| Legal | Scales, Shield | Navy (#001f54), Gold (#c5a778) |
| Education | Book, Circle | Blue (#1976d2), Green (#388e3c) |
| Retail | Shopping bag, Tag | Brand-specific |
When in doubt: Use a circle with brand colors (universally works)
Must match existing branding:
Contrast requirements:
No transparency on iOS:
<!-- ❌ WRONG (appears as black square on iOS) -->
<circle cx="16" cy="16" r="16" fill="transparent"/>
<!-- ✅ CORRECT (solid background) -->
<circle cx="16" cy="16" r="16" fill="#0066cc"/>
When delivering favicon package to client or deploying:
favicon.svg (source file, modern browsers)favicon.ico (16x16 and 32x32 sizes, legacy)apple-touch-icon.png (180x180, solid background)icon-192.png (Android home screen)icon-512.png (PWA, high-res displays)site.webmanifest (web app manifest)<link> tags (copy-paste ready)This skill prevents 8 documented issues:
Error: Website goes live with WordPress "W" or platform default Source: https://wordpress.org/support/topic/change-default-favicon/ Why It Happens: Developers forget favicon during build, CMS serves default Prevention: Generate custom favicon before launch, add to checklist
Error: iOS home screen shows black box instead of icon Source: https://developer.apple.com/design/human-interface-guidelines/app-icons Why It Happens: apple-touch-icon.png has transparent background Prevention: Always use solid background color on iOS icons
Error: Old favicon shows despite uploading new one Source: https://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh Why It Happens: Browsers aggressively cache favicons (days/weeks) Prevention: Instruct users to hard refresh (Ctrl+Shift+R), clear cache, or version favicon URL
Error: Favicon looks muddy or unrecognizable in browser tabs Source: Common UX issue Why It Happens: Too much detail for small canvas (fine lines, many colors) Prevention: Simplify design, test at actual size, use 3-5 shapes max
Error: No favicon in older browsers (IE11, old Edge) Source: https://caniuse.com/link-icon-svg Why It Happens: Only providing SVG, ICO not generated Prevention: Always generate both favicon.svg and favicon.ico
Error: Android "Add to Home Screen" shows no icon or default icon Source: https://web.dev/add-manifest/ Why It Happens: No manifest file linking to PNG icons Prevention: Always create site.webmanifest with 192/512 icons
Error: Favicon blurry at some sizes Source: https://en.wikipedia.org/wiki/ICO_(file_format) Why It Happens: ICO generated with only one size (e.g., 32x32 only) Prevention: ICO must include both 16x16 and 32x32 sizes
Error: Letters disappear or barely visible in favicon Source: Common design issue Why It Happens: Using regular (400) font weight instead of bold (700) Prevention: Always use font-weight="bold" or 700 for text in favicons
SVG Templates (copy and customize):
favicon-svg-circle.svg - Circle monogram (most universal)favicon-svg-square.svg - Rounded square monogram (modern)favicon-svg-shield.svg - Shield monogram (security/trust)manifest.webmanifest - Web app manifest templateUsage:
# Copy template
cp ~/.claude/skills/favicon-gen/templates/favicon-svg-circle.svg favicon.svg
# Edit in text editor or Figma
# Change colors, text, and customize
# Generate ICO and PNGs from customized SVG
When Claude should load these: For detailed guidance on specific techniques
references/format-guide.md - Complete specification of all formats (SVG, ICO, PNG requirements)references/extraction-methods.md - Detailed steps for extracting icons from logosreferences/monogram-patterns.md - Advanced monogram design patternsreferences/shape-templates.md - Shape variations by industry with SVG codeTest in multiple contexts:
Browser tab (Chrome, Firefox, Safari)
Bookmarks bar
iOS Home Screen
Android Home Screen
PWA Install Dialog
SVG validation:
# Check SVG is valid XML
xmllint --noout favicon.svg
# Or online: https://validator.w3.org/
ICO validation:
# Check ICO contains multiple sizes
identify favicon.ico
# Should show:
# favicon.ico[0] ICO 16x16
# favicon.ico[1] ICO 32x32
Manifest validation:
Solution:
<link> tags are correctSolution: apple-touch-icon.png needs solid background
# Re-generate with solid background
convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png
Solution:
Solution:
<head>| Format | Size(s) | Use Case | Transparency | Required? |
|---|---|---|---|---|
favicon.svg | Vector | Modern browsers | ✅ Yes | ✅ Yes |
favicon.ico | 16x16, 32x32 | Legacy browsers | ✅ Yes | ✅ Yes |
apple-touch-icon.png | 180x180 | iOS home screen | ❌ No (solid) | ✅ Yes |
icon-192.png | 192x192 | Android | ✅ Yes | ✅ Yes |
icon-512.png | 512x512 | PWA, high-res | ✅ Yes | ✅ Yes |
site.webmanifest | N/A | PWA metadata | N/A | ✅ Yes |
Scenario: Logo has rocket ship icon + "Launchpad" text
Approach: Extract rocket icon
Result: Clean, scalable rocket favicon matching brand
Scenario: "Stratton Partners" text logo, no icon
Approach: Create monogram
Result: Professional SP monogram in brand colors
Scenario: New restaurant, needs favicon before logo finalized
Approach: Branded shape
Result: Temporary favicon matching restaurant vibe, replaceable later
This skill is based on patterns used in 50+ client websites:
Questions? Issues?
references/format-guide.md for format specificationstemplates/ directory (copy and customize)