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.
Generates custom favicons in all required formats from logos, text, or brand colors.
/plugin marketplace add jezweb/claude-skills/plugin install jezweb-tooling-skills@jezweb/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
README.mdagents/favicon-crafter.mdreferences/extraction-methods.mdreferences/format-guide.mdreferences/monogram-patterns.mdreferences/shape-templates.mdrules/favicon-gen.mdtemplates/favicon-svg-circle.svgtemplates/favicon-svg-shield.svgtemplates/favicon-svg-square.svgtemplates/manifest.webmanifestStatus: 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)This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.