favicon-generator

Favicon generation automatically creates all necessary formats—ICO, SVG, PNG—across sizes from 16x16 to 512x512 for web, iOS, Android, and PWAs. You input your app name, brand color, and icon choice; the Skill outputs framework-ready assets with drop shadows, glows, and gradients applied.

Yes, the Skill analyzes Tailwind CSS or CSS variable definitions in your codebase to derive brand colors automatically. This ensures your favicon palette stays consistent with your app's design system without manual color entry.

You can choose from 18 curated Lucide icons, 8 design templates, or use letters and emojis as your favicon base. Each option pairs with the pro-grade effects engine—drop shadows, inner glows, highlights, gradients, and noise textures—for a polished result.

The Skill provides framework integration guidance and outputs complete favicon suites. It generates the exact code snippets and asset locations needed to add your favicons to Next.js, ensuring proper linking across browsers and devices with minimal setup.

No design software is required. The Skill handles all rendering internally using Pillow and cairosvg as dependencies. You provide your app details and branding; the Skill manages pixel-perfect generation, optical centering, and precise padding automatically.

This Skill delivers production-grade effects—drop shadows, glows, highlights, gradients, noise textures—and ensures optical centering and precise padding across all output formats. It integrates with your codebase's existing icons and brand colors for consistency that generic online tools cannot match.