Generate custom favicons from logos, text, or brand colours. Produces favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, and web manifest. Use whenever the user wants a favicon, mentions replacing a CMS default favicon, converting a logo into a favicon, creating branded initials icons

Favicon Generator Generate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code. Workflow Step 1: Choose Your Approach Step 2: Create Source SVG Extracted icon — copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes. Monogram — use a template from assets/ : Branded shape — circle (universal), rounded square (modern), shield (security), hexagon (tech). SVG templates available in assets/ directory. Step 3: Generate All Formats Requires ImageMagick ( convert command). Install if needed: brew install imagemagick (macOS) or apt install imagemagick (Linux). No ImageMagick? Use https://favicon.io to convert from the SVG instead. Step 4: Create Web Manifest Copy and customise assets/manifest.webmanifest : Step 5: Add HTML Tags Place all files in site root ( /public/ in Vite/React). Critical Rules Always generate ALL formats — SVG, ICO, apple touch icon, 192, 512, manifest iOS icons MUST have solid backgrounds — transparent = black square Always use bold font weight for monogram text (regular disappears at 16x16) Test at 16x16 — if it's not legible, simplify Never launch with CMS defaults (WordPress "W", etc.) Format Quick Reference Format Size Transparency Purpose favicon.svg Vector Yes Modern browsers favicon.ico 16+32 Yes Legacy browsers apple touch icon.png 180x180 No iOS home screen icon 192.png 192x192 Yes Android icon 512.png 512x512 Yes PWA Asset Files assets/favicon svg circle.svg — Circle monogram template assets/favicon svg square.svg — Rounded square template assets/favicon svg shield.svg — Shield template assets/manifest.webmanifest — Web manifest template Reference Files references/format guide.md — Complete format specifications references/extraction methods.md — Logo icon extraction steps references/monogram patterns.md — Advanced monogram design references/shape templates.md — Industry specific shapes with SVG code

favicon-gen