favicon-gen

# Favicon Generator

**Status**: Production Ready ✅
**Last Updated**: 2026-01-14
**Dependencies**: None (generates pure SVG/converts to ICO and PNG)
**Latest Versions**: N/A (no package dependencies)

---

## Quick Start (5 Minutes)

### Decision Tree: Choose Your Approach

```
Do you have a logo with an icon element?
├─ YES → Extract icon from logo (Method 1)
└─ NO
   ├─ Do you have text/initials?
   │  ├─ YES → Create monogram favicon (Method 2)
   │  └─ NO → Use branded shape (Method 3)
```

### Method 1: Extract Icon from Logo

**When to use**: Logo includes a standalone icon element (symbol, lettermark, or geometric shape)

```bash
# 1. Identify the icon element in your logo SVG
# 2. Copy just the icon paths/shapes
# 3. Center in 32x32 viewBox
# 4. Simplify for small sizes (remove fine details)
```

**Example**: Logo with rocket ship → Extract just the rocket shape

### Method 2: Create Monogram Favicon

**When to use**: Only have business name, no logo yet

```bash
# 1. Choose 1-2 letters (initials or brand abbreviation)
# 2. Pick shape template (circle, rounded square, shield)
# 3. Set brand colors
# 4. Generate SVG
```

**Example**: "Acme Corp" → "AC" monogram in circle

### Method 3: Branded Shape Favicon

**When to use**: No logo, no strong text identity, need something now

```bash
# 1. Choose industry-relevant shape
# 2. Apply brand colors
# 3. Generate SVG
```

**Example**: Tech startup → Hexagon with gradient

---

## Critical Rules

### Always Do

✅ **Generate ALL required formats**:
- `favicon.svg` (modern browsers, scalable)
- `favicon.ico` (legacy browsers, 16x16 and 32x32)
- `apple-touch-icon.png` (180x180, iOS)
- `icon-192.png` (Android)
- `icon-512.png` (Progressive Web Apps)

✅ **Use solid backgrounds for iOS** (transparent = black box on iOS)

✅ **Test at 16x16** (smallest display size)

✅ **Keep designs simple** (3-5 shapes max, no fine details)

✅ **Match brand colors** exactly

### Never Do

❌ **NEVER use CMS default favicons** (WordPress "