| name | favicon-generator |
| description | Generate professional-quality favicons that rival the best app icons. Uses a multi-layer effects engine with drop shadows, inner glows, highlights, gradients, and noise textures. Includes 8 curated design templates and 18 Lucide icons. Produces complete favicon suites with proper ICO, SVG, PNG formats and framework integration. Trigger when users need favicons, app icons, or browser tab icons.
|
Pro-Grade Favicon Generator
Create stunning, professional-quality favicons that stand alongside icons from Linear, Notion, Figma, and other polished apps.
Philosophy: Favicons Are Miniature Design Artifacts
The difference between a mediocre favicon and a great one isn't complexity—it's polish. Great favicons have:
- Depth: Subtle shadows that lift the icon off the surface
- Lighting: Highlights and gradients that create dimensionality
- Texture: Optional noise/grain that adds organic feel
- Precision: Optical centering, proper padding, crisp edges
Before generating, ask yourself:
- What's the app's personality? (Playful, professional, technical, creative)
- What colors define the brand? (Extract from tailwind config, CSS, or ask)
- What level of polish is needed? (Quick prototype vs. production launch)
Workflow: Discover Existing Icons First
CRITICAL: Before generating a favicon, always check what icons are already used in the codebase. The favicon should match your existing brand identity.
Step 1: Search for Icon Usage
Search the codebase for icon imports and usage:
rg "from.*lucide-react" --type tsx --type ts
rg "PackagePlus|Package|Icon" --type tsx --type ts
rg "Header|Nav|Logo" --type tsx
Step 2: Identify Primary Brand Icons
Look for:
- Logo icons: Used in Header, navigation, or branding components
- Most frequently used icons: Appear in multiple places
- Icon libraries: lucide-react, react-icons, custom SVG components
Example discovery:
Found in Header.tsx: PackagePlus from lucide-react
Found in HomePage.tsx: PackagePlus, Package
Primary brand icon: PackagePlus (used in logo/branding)
Step 3: Extract Icon Paths
If using lucide-react or similar libraries:
-
Locate icon definition:
cat node_modules/lucide-react/dist/esm/icons/package-plus.js
-
Extract SVG paths from the icon definition:
- Lucide icons use 24x24 viewBox
- Paths are defined as arrays:
["path", { d: "M..." }]
- Copy the exact
d attributes from each path
-
Use cairosvg for accurate rendering (recommended):
pip install cairosvg
brew install cairo
Why cairosvg? Pillow cannot render SVG bezier curves and arcs. Lucide icons
use arc commands (a2 2 0 0 0...) that only a proper SVG renderer can draw.
Step 4: Match Favicon to Brand Icon
- Same icon: Use the exact icon from your brand (e.g., PackagePlus → PackagePlus favicon)
- Same colors: Extract brand colors from Tailwind config or CSS variables
- Same style: Match the visual style (minimal, vibrant, etc.)
Example: PackagePlus Favicon with cairosvg
import cairosvg
from PIL import Image
from io import BytesIO
SVG_TEMPLATE = """<svg xmlns="http://www.w3.org/2000/svg" width="{size}" height="{size}" viewBox="0 0 {size} {size}">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f97316"/>
<stop offset="100%" stop-color="#ef4444"/>
</linearGradient>
</defs>
<rect width="{size}" height="{size}" rx="{radius}" fill="url(#bg)"/>
<g transform="translate({offset}, {offset}) scale({scale})"
stroke="#ffffff" stroke-width="2" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<!-- Exact Lucide PackagePlus paths -->
<path d="M16 16h6"/>
<path d="M19 13v6"/>
<path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14"/>
<path d="m7.5 4.27 9 5.15"/>
<polyline points="3.29 7 12 12 20.71 7"/>
<line x1="12" x2="12" y1="22" y2="12"/>
</g>
</svg>"""
def render_lucide_icon(size):
scale = (size * 0.7) / 24
offset = size * 0.15
radius = int(size * 0.22)
svg = SVG_TEMPLATE.format(size=size, scale=scale, offset=offset, radius=radius)
png_data = cairosvg.svg2png(bytestring=svg.encode('utf-8'))
return Image.open(BytesIO(png_data)).convert('RGBA')
Why This Matters
- Consistency: Favicon matches your app's visual identity
- Brand recognition: Users recognize your icon across contexts
- Professionalism: Shows attention to detail and design coherence
- Avoids mismatch: Prevents generating a favicon that doesn't match your actual logo
The Effects Stack
Professional favicons are built in layers, not drawn flat:
┌─────────────────────────────────────┐
│ Layer 6: Content (letter/icon) │ ← With its own shadow
│ Layer 5: Noise texture │ ← Subtle grain for organic feel
│ Layer 4: Highlight gradient │ ← Top-lit shine effect
│ Layer 3: Inner glow │ ← Ambient light/shadow
│ Layer 2: Background │ ← Gradient or solid
│ Layer 1: Drop shadow │ ← Depth and lift
└─────────────────────────────────────┘
Each layer is subtle. Combined, they create polish that's felt rather than seen.
Generation Tools
This skill provides two complementary tools:
Tool 1: Interactive HTML Generator
File: scripts/generate_favicon_pro.html
Open in browser for real-time preview and customization:
- 8 professional design templates
- 18 Lucide icons + letter/emoji modes
- Live effect adjustment (shadow, glow, highlight, noise)
- All sizes preview (16px to 512px)
- Context preview (browser tab, bookmarks)
- Bulk download
Best for: Quick iteration, visual exploration, client demos
Tool 2: Python CLI Pipeline
File: scripts/generate_favicon.py
Command-line generation with Pillow:
python generate_favicon.py --letter A --style vibrant --output ./public/
python generate_favicon.py --letter T --bg "#22c55e" --bg2 "#14b8a6" --output ./favicons/
python generate_favicon.py --letter N --bg "#0f172a" --fg "#22d3ee" \
--shadow 0.6 --glow 0.5 --noise 0.04 --output ./icons/
Best for: CI/CD integration, batch generation, precise control
Design Templates
Choose a template that matches the app's personality:
| Template | Colors | Character | Best For |
|---|
| Modern | Indigo → Purple | Clean, trustworthy | SaaS, productivity |
| Vibrant | Pink → Orange | Energetic, bold | Consumer apps, social |
| Minimal | Near-black | Understated, technical | Dev tools, utilities |
| Glass | Blue → Cyan | Airy, modern | Dashboards, analytics |
| Neon | Dark + Cyan glow | Futuristic, edgy | Gaming, creative tools |
| Warm | Amber → Red | Friendly, approachable | Food, lifestyle, community |
| Forest | Green → Teal | Natural, sustainable | Health, environment, finance |
| Mono | White + Black | Minimal, adaptable | Any (works in any context) |
Template Selection Guide
App personality assessment:
├── Professional/Enterprise → Minimal, Modern, Mono
├── Consumer/Fun → Vibrant, Warm, Neon
├── Technical/Developer → Minimal, Glass, Neon
├── Health/Wellness → Forest, Warm
└── Creative/Design → Vibrant, Glass, Modern
Content Types
1. Letter/Monogram (Default)
Single letter or two-letter combination from app name.
"TaskFlow" → "T" or "TF"
"Acme Corp" → "A" or "AC"
Typography considerations:
- Single letters work better at small sizes
- Choose distinctive letters (avoid O, I which lack character)
- Font weight matters—bold reads better at 16px
2. Icons (Lucide Integration)
18 curated Lucide icons for common app types:
| Icon | Use Case |
|---|
rocket | Startups, launch, speed |
zap | Performance, automation |
star | Favorites, ratings, premium |
heart | Health, favorites, social |
code | Developer tools, IDEs |
box | Packages, containers, storage |
compass | Navigation, exploration |
flame | Trending, hot, energy |
globe | International, web, browser |
layers | Design, stacks, organization |
music | Audio, media, entertainment |
send | Messaging, communication |
shield | Security, protection, trust |
sparkles | AI, magic, premium |
sun | Light mode, energy, positivity |
target | Goals, focus, precision |
terminal | CLI, developer, technical |
wand | Magic, automation, creative |
3. Emoji
Native emoji for playful, informal apps.
🚀 → Launch, speed, startups
💡 → Ideas, innovation
🔥 → Trending, hot
✨ → Premium, magic
Note: Emoji rendering varies by OS—test on multiple platforms.
Effects Reference
Drop Shadow
Creates depth and lift. Essential for polished look.
| Intensity | Effect | Use When |
|---|
| 0.2–0.3 | Subtle | Minimal designs, light backgrounds |
| 0.4–0.5 | Balanced | Most apps (default) |
| 0.6+ | Strong | Dark backgrounds, high contrast |
Highlight
Top-lit gradient that adds dimensionality.
| Intensity | Effect | Use When |
|---|
| 0.15–0.25 | Gentle | Subtle polish |
| 0.3–0.4 | Pronounced | Glass, vibrant styles |
| 0.5+ | Strong | Glossy, skeuomorphic look |
Inner Glow
Radial lighting from center, creates depth.
| Intensity | Effect | Use When |
|---|
| 0.2–0.3 | Soft ambient | Glass style |
| 0.4–0.5 | Noticeable | Neon, futuristic |
| 0.6+ | Strong | Glowing effect |
Noise/Grain
Subtle texture that prevents banding and adds organic feel.
| Intensity | Effect | Use When |
|---|
| 0.03–0.05 | Barely visible | Anti-banding only |
| 0.06–0.08 | Subtle texture | Organic, natural feel |
| 0.1+ | Visible grain | Vintage, film aesthetic |
Corner Radius
Shape of the icon background.
| Value | Shape | Platform |
|---|
| 0.15–0.18 | Squircle | iOS-like |
| 0.20–0.24 | Rounded | Modern default |
| 0.30+ | Very round | Playful, bubble |
| 0.50 | Circle | Circular icons |
Output Structure
Standard Suite (Default)
public/
├── favicon.ico # Legacy (16+32 combined)
├── favicon.svg # Modern browsers (scalable)
├── favicon-16x16.png # Browser tabs
├── favicon-32x32.png # Browser tabs (retina)
├── favicon-48x48.png # Windows tiles
├── favicon-64x64.png # Windows tiles
├── favicon-128x128.png # Chrome Web Store
├── apple-touch-icon.png # iOS home screen (180x180)
├── favicon-192x192.png # Android Chrome
└── favicon-512x512.png # PWA, Android
Framework Integration
Next.js (App Router)
import type { Metadata } from 'next'
export const metadata: Metadata = {
icons: {
icon: [
{ url: '/favicon.ico', sizes: 'any' },
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
{ url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
],
apple: [
{ url: '/apple-touch-icon.png', sizes: '180x180' },
],
},
}
Standard HTML
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
PWA Manifest
{
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Workflow Examples
Example 1: New SaaS Product
User: "Create a favicon for my project management app called Flowboard"
Claude:
1. [Discovers existing icons]
- Searches codebase: rg "from.*lucide-react"
- Finds: Header.tsx uses PackagePlus icon
- Checks: No existing favicon, but brand uses PackagePlus
2. [Analyzes codebase]
- tailwind.config.ts: primary = "#6366f1"
- Package name: "flowboard"
- Brand icon: PackagePlus (from lucide-react)
3. [Selects approach]
- Option A: Match brand icon (PackagePlus) → Extract paths from lucide-react
- Option B: Use letter "F" (distinctive, good at small sizes)
- Decision: Use PackagePlus to match brand identity
- Style: "Modern" (professional SaaS)
- Colors: Use brand indigo
4. [Extracts icon paths]
- Reads: node_modules/lucide-react/dist/esm/icons/package-plus.js
- Extracts SVG paths and converts 24x24 → 32x32
5. [Generates with Python script]
python generate_packageplus_favicon.py --output ./public/
6. [Integrates with Next.js]
Updates app/layout.tsx with metadata.icons
7. [Delivers]
"Created favicon suite matching your PackagePlus brand icon.
The favicon now matches your Header logo exactly—check the browser tab preview."
Example 2: Developer Tool
User: "Make a favicon for my CLI tool"
Claude:
1. [Discovers existing icons]
- Searches: rg "Icon|Logo" --type tsx
- Finds: No existing brand icons, new project
2. [Considers personality]
- Developer audience → technical, minimal
- CLI context → terminal icon fits well
3. [Selects approach]
- Content: Terminal icon from Lucide (extract actual paths)
- Style: "Minimal" (dark, understated)
- Effects: Subtle shadow, slight noise
4. [Extracts Terminal icon paths]
- Reads: node_modules/lucide-react/dist/esm/icons/terminal.js
- Converts paths to favicon coordinate system
5. [Opens HTML generator for preview]
Shows user the terminal icon in minimal style
6. [Adjusts based on feedback]
User: "Can we make it more techy?"
→ Switches to "Neon" style with cyan glow
7. [Generates final suite]
Downloads all sizes, integrates with project
Example 3: Playful Consumer App
User: "I need a fun favicon with a rocket for my startup"
Claude:
1. [Selects approach]
- Content: Rocket icon (not emoji for consistency)
- Style: "Vibrant" (pink→orange, energetic)
- Effects: Strong shadow, highlight, no noise
2. [Previews in context]
Shows browser tab mockup, bookmark bar
3. [Generates]
Full suite with all sizes
4. [Delivers with context]
"Here's your rocket favicon in vibrant colors. The icon
stays crisp even at 16px. I've included the apple-touch-icon
for when users add to their phone home screen."
Anti-Patterns
❌ Flat, shadowless designs
Problem: Icon looks pasted on, no depth
Fix: Add at least 0.3 shadow intensity
❌ Over-complicated at small sizes
Problem: 16px version is unrecognizable mush
Fix: Test at actual 16px—simplify if needed
❌ Generic blue gradient
Problem: Looks like every other AI-generated icon
Fix: Use brand colors, vary the template
❌ Ignoring the effects stack
Problem: Just background + letter, looks amateur
Fix: Apply shadow + highlight at minimum
❌ Wrong template for context
Problem: Neon style for a healthcare app
Fix: Match template to brand personality
❌ Skipping the preview step
Problem: Looks good at 512px, bad at 16px
Fix: Always check size previews before finalizing
❌ Not testing in context
Problem: Colors clash with browser chrome
Fix: Use context preview (tab, bookmarks)
Variation Guidance
CRITICAL: Each favicon should feel custom, not templated.
Vary by app type:
- Dev tools → Terminal icon, Minimal/Neon style, dark colors
- Consumer apps → Vibrant icons, warm colors, playful shapes
- Enterprise → Letter monogram, Modern/Mono style, brand colors
- Creative tools → Abstract shapes, Glass style, unique gradients
Vary the effects:
- Don't always use the same shadow intensity
- Try different corner radii
- Experiment with inner glow for certain styles
- Add noise for organic apps, skip for technical ones
Vary the content:
- Not every app needs a letter
- Icons can be more memorable than letters
- Consider the app's core action (send, shield, target)
Quick Reference
Python CLI
python generate_favicon.py --letter A --output ./public/
python generate_favicon.py --letter T --style vibrant --output ./public/
python generate_favicon.py --letter N --bg "#0f172a" --bg2 "#1e293b" \
--fg "#22d3ee" --output ./public/
python generate_favicon.py --letter M \
--bg "#ec4899" --bg2 "#f97316" --fg "#ffffff" \
--shadow 0.5 --highlight 0.3 --glow 0.2 --noise 0.05 \
--radius 0.24 --output ./public/
Available Templates
modern, vibrant, minimal, glass, neon, warm, forest, mono
Available Icons
rocket, zap, star, heart, code, box, compass, flame, globe, layers, music, send, shield, sparkles, sun, target, terminal, wand
Effect Ranges
- Shadow: 0.0–1.0 (default: 0.4)
- Highlight: 0.0–1.0 (default: 0.25)
- Inner Glow: 0.0–1.0 (default: 0.0)
- Noise: 0.0–1.0 (default: 0.0)
- Corner Radius: 0.0–0.5 (default: 0.22)
Remember
Great favicons are felt, not analyzed. Users don't consciously notice the drop shadow or the highlight gradient—they just sense that the icon feels professional and polished.
The difference between amateur and professional is:
- Layered effects vs. flat rendering
- Considered templates vs. random colors
- Size-appropriate detail vs. complexity that muddies
- Tested in context vs. only viewed at full size
Use the tools to handle the technical complexity. Focus your energy on choosing the right personality, colors, and content for the specific app.
