favicon-gen_skill

Overview

This skill generates production-ready favicons from logos, text, or brand colors to prevent launching with CMS defaults. It produces all required files (favicon.svg, favicon.ico, apple-touch-icon.png, icon-192.png, icon-512.png) and a web manifest so icons display correctly across browsers and platforms. Use it to extract icon elements, create monograms, or generate branded shapes with correct sizing and background rules.

How this skill works

The skill inspects source SVGs or brand inputs and creates a 32x32 SVG optimized for small sizes, then exports PNG and ICO variants at required resolutions. It enforces critical rules (solid iOS backgrounds, simple shapes, bold monogram fonts) and outputs a site.webmanifest plus copy-paste HTML head tags. It also includes templates and a step-by-step 4-stage process: create source SVG, generate ICO, export PNGs, and create the manifest.

When to use it

• Initializing a new website to ensure a custom favicon before launch
• Replacing WordPress or CMS default favicons (e.g., WordPress "W")
• Converting a full logo into a simplified favicon icon
• Creating a monogram favicon from brand initials when no logo exists
• Troubleshooting favicon issues: not displaying, iOS black square, missing manifest

Best practices

• Always generate all formats: favicon.svg, favicon.ico (16x16 & 32x32), apple-touch-icon.png (180x180), icon-192.png, icon-512.png, and site.webmanifest
• Use a 32x32 viewBox for source SVG and test legibility at 16x16; simplify shapes and limit to 3–5 shapes
• Use solid backgrounds for apple-touch-icon.png to avoid black squares on iOS
• Match brand colors exactly and ensure a minimum contrast ratio of 4.5:1 for legibility
• Use bold font weight for monograms and prefer 1–2 letters; choose circle or rounded square templates for universal compatibility

Example use cases

• Extract the rocket or shield symbol from an existing SVG logo and export favicon package
• Create an AC monogram in a circle using brand colors when only a business name exists
• Generate a hexagon branded shape for a tech startup and include manifest for PWA support
• Replace default CMS favicon during launch checklist to avoid platform logos appearing
• Diagnose missing favicon: check manifest, ICO fallback, and iOS solid-background rule