favicon-gen

1# Favicon Generator
2 
3Generate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code.
4 
5## Workflow
6 
7### Step 1: Choose Your Approach
8 
9```
10Have a logo with an icon element?
11 YES -> Extract icon from logo
12 NO  -> Have text/initials?
13         YES -> Create monogram favicon
14         NO  -> Use branded shape
15```
16 
17### Step 2: Create Source SVG
18 
19**Extracted icon** — copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes.
20 
21**Monogram** — use a template from `assets/`:
22```xml
23<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
24  <circle cx="16" cy="16" r="16" fill="#0066cc"/>
25  <text x="16" y="21" font-size="16" font-weight="bold"
26        text-anchor="middle" fill="#ffffff" font-family="sans-serif">AC</text>
27</svg>
28```
29 
30**Branded shape** — circle (universal), rounded square (modern), shield (security), hexagon (tech).
31 
32SVG templates available in `assets/` directory.
33 
34### Step 3: Generate All Formats
35 
36Requires ImageMagick (`convert` command). Install if needed: `brew install imagemagick` (macOS) or `apt install imagemagick` (Linux).
37 
38```bash
39# ICO (16x16 + 32x32)
40convert favicon.svg -define icon:auto-resize=16,32 favicon.ico
41 
42# Apple Touch Icon (180x180, SOLID background — transparent = black on iOS)
43convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png
44 
45# Android/PWA icons
46convert favicon.svg -resize 192x192 icon-192.png
47…