favicon-gen

The favicon-gen skill is an automated design-to-production tool designed for developers and web designers who need to generate a complete, high-quality favicon package rapidly. It eliminates the need for manual image processing by taking raw inputs—such as a brand logo, initials, or specific brand colors—and outputting every required format for modern web standards, including favicon.svg, favicon.ico, apple-touch-icon.png, and Android/PWA-specific icons. It further automates the generation of the necessary site.webmanifest file and provides the boilerplate HTML meta tags required for proper integration.

• Automatically generates multiple sizes (16x16, 32x32, 180x180, 192x192, 512x512) from a single source SVG.

• Supports various design approaches: icon extraction from logos, monogram creation from initials, and branded shape generation (circles, squares, shields).

• Includes logic to handle platform-specific quirks, such as ensuring iOS icons have solid backgrounds to avoid the common 'black square' rendering issue.

• Integrates directly with ImageMagick for robust image conversion and transformation.

• Provides a step-by-step workflow for testing legibility at 16x16 dimensions and simplifying iconography for smaller display areas.

• Prerequisite: Requires ImageMagick (convert command) installed on the system (via brew or apt).

• Inputs: Accepts raw logo files, brand color hex codes, or requested text/initials for monograms.

• Outputs: A comprehensive directory of standardized icon files and a custom manifest.webmanifest.

• Use cases: Initializing new website projects, replacing generic CMS-default icons (e.g., WordPress 'W'), troubleshooting icon rendering issues on mobile home screens, or ensuring PWA compatibility for web applications.

• Best practices: Always test small-scale legibility and use bold font weights for monograms to maintain clarity at reduced sizes.