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.
View on GitHubskills/favicon-gen/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/brendadeeznuts1111/tier-1380-omega/blob/main/skills/favicon-gen/SKILL.md -a claude-code --skill favicon-genInstallation paths:
.claude/skills/favicon-gen/# Favicon Generator **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) --- ## Quick Start (5 Minutes) ### Decision Tree: Choose Your Approach ``` 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) ``` ### Method 1: Extract Icon from Logo **When to use**: Logo includes a standalone icon element (symbol, lettermark, or geometric shape) ```bash # 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 ### Method 2: Create Monogram Favicon **When to use**: Only have business name, no logo yet ```bash # 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 ### Method 3: Branded Shape Favicon **When to use**: No logo, no strong text identity, need something now ```bash # 1. Choose industry-relevant shape # 2. Apply brand colors # 3. Generate SVG ``` **Example**: Tech startup → Hexagon with gradient --- ## Critical Rules ### Always Do ✅ **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 Do ❌ **NEVER use CMS default favicons** (WordPress "