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:

Find lucide-react imports

rg "from.*lucide-react" --type tsx --type ts

Find icon component usage

rg "PackagePlus|Package|Icon" --type tsx --type ts

Check Header/Nav components (common icon locations)

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 # macOS - required native library

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

Actual Lucide PackagePlus paths (from node_modules/lucide-react/dist/esm/icons/package-plus.js)

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): # Lucide uses 24x24, scale to fit in favicon with padding 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:

Using a template

python generate_favicon.py --letter A --style vibrant --output ./public/

Custom colors

python generate_favicon.py --letter T --bg "#22c55e" --bg2 "#14b8a6" --output ./favicons/

Full control

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)

// app/layout.tsx 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

Basic

python generate_favicon.py --letter A --output ./public/

With template

python generate_favicon.py --letter T --style vibrant --output ./public/

Custom colors

python generate_favicon.py --letter N --bg "#0f172a" --bg2 "#1e293b"
--fg "#22d3ee" --output ./public/

Full control

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.