Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
chongdashu avatar

Favicon Generator

chongdashu/cc-skills

  • 15 installs
  • 28 repo stars
  • Updated December 5, 2025
  • chongdashu/cc-skills

Generate professional favicon suites with layered effects, curated templates, and Lucide icons in ICO, SVG, and PNG formats.

About

Produces polished favicons using a multi-layer effects engine, design templates, and framework integration in proper ICO, SVG, and PNG formats. Used when a developer needs app icons or browser tab icons matching a brand.

  • Multi-layer effects with shadows, glows, and gradients
  • 8 templates, 18 Lucide icons, full format suite

Favicon Generator by the numbers

  • 15 all-time installs (skills.sh)
  • Ranked #1,401 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/chongdashu/cc-skills --skill favicon-generator

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs15
repo stars★ 28
Last updatedDecember 5, 2025
Repositorychongdashu/cc-skills ↗

What it does

Generate professional favicon suites with layered effects, curated templates, and Lucide icons in ICO, SVG, and PNG formats.

Files

SKILL.mdMarkdownGitHub ↗

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: 1. What's the app's personality? (Playful, professional, technical, creative) 2. What colors define the brand? (Extract from tailwind config, CSS, or ask) 3. 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:

1. Locate icon definition:

   cat node_modules/lucide-react/dist/esm/icons/package-plus.js

2. 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

3. 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:

TemplateColorsCharacterBest For
ModernIndigo → PurpleClean, trustworthySaaS, productivity
VibrantPink → OrangeEnergetic, boldConsumer apps, social
MinimalNear-blackUnderstated, technicalDev tools, utilities
GlassBlue → CyanAiry, modernDashboards, analytics
NeonDark + Cyan glowFuturistic, edgyGaming, creative tools
WarmAmber → RedFriendly, approachableFood, lifestyle, community
ForestGreen → TealNatural, sustainableHealth, environment, finance
MonoWhite + BlackMinimal, adaptableAny (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:

IconUse Case
rocketStartups, launch, speed
zapPerformance, automation
starFavorites, ratings, premium
heartHealth, favorites, social
codeDeveloper tools, IDEs
boxPackages, containers, storage
compassNavigation, exploration
flameTrending, hot, energy
globeInternational, web, browser
layersDesign, stacks, organization
musicAudio, media, entertainment
sendMessaging, communication
shieldSecurity, protection, trust
sparklesAI, magic, premium
sunLight mode, energy, positivity
targetGoals, focus, precision
terminalCLI, developer, technical
wandMagic, 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.

IntensityEffectUse When
0.2–0.3SubtleMinimal designs, light backgrounds
0.4–0.5BalancedMost apps (default)
0.6+StrongDark backgrounds, high contrast

Highlight

Top-lit gradient that adds dimensionality.

IntensityEffectUse When
0.15–0.25GentleSubtle polish
0.3–0.4PronouncedGlass, vibrant styles
0.5+StrongGlossy, skeuomorphic look

Inner Glow

Radial lighting from center, creates depth.

IntensityEffectUse When
0.2–0.3Soft ambientGlass style
0.4–0.5NoticeableNeon, futuristic
0.6+StrongGlowing effect

Noise/Grain

Subtle texture that prevents banding and adds organic feel.

IntensityEffectUse When
0.03–0.05Barely visibleAnti-banding only
0.06–0.08Subtle textureOrganic, natural feel
0.1+Visible grainVintage, film aesthetic

Corner Radius

Shape of the icon background.

ValueShapePlatform
0.15–0.18SquircleiOS-like
0.20–0.24RoundedModern default
0.30+Very roundPlayful, bubble
0.50CircleCircular 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: 1. Layered effects vs. flat rendering 2. Considered templates vs. random colors 3. Size-appropriate detail vs. complexity that muddies 4. 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.

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k
Design & UI/UXuibranding
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.