faviconlisted

# Favicon generation ## What modern browsers actually want (see research 11) ```html <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/svg+xml" href="/icon.svg"> <link rel="icon" type="image/svg+xml" href="/icon-dark.svg" media="(prefers-color-scheme: dark)"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> ``` | File | Size | Alpha | Notes | |---|---|---|---| | `favicon.ico` | 16, 32, 48 packed | yes | legacy compatibility; <15KB | | `icon.svg` | vector | yes | primary modern icon | | `icon-dark.svg` | vector | yes | `prefers-color-scheme: dark` | | `apple-touch-icon.png` | 180×180 | **no** — opaque | iOS home-screen; transparent = black background on iOS | | `pwa/192.png`, `pwa/512.png` | 192, 512 | yes | manifest `any` purpose | | `pwa/512-maskable.png` | 512, 80% safe zone padding | opaque | manifest `maskable` purpose | ## Generation strategy **SVG-first.** Three paths, in order of preference: 1. **Reuse existing mark.** If a brand `logo-mark.svg` exists in the brand bundle, use it directly. Optimize with SVGO. Generate color variants by re-coloring SVG paths. 2. **LLM-author SVG.** For simple geometric marks (letter, glyph, shape), ask Claude/GPT to emit raw SVG with fixed viewBox, ≤40 paths, palette as hex list. Validate with `@resvg/resvg-js` rasterization. 3. **Generate raster + vectorize.** Prompt at 1024² (see `skills/logo/SKILL.md`), BiRefNet matte, K-means 4-color (fav