# Favicons

Canonical favicon sets for UNDRR web properties, published to the UNDRR asset library at `assets.undrr.org/favicons/`.

## Brands

| Brand | Directory | Source |
|-------|-----------|--------|
| ARISE | `arise/v1/` | ARISE circular swirl mark |
| GAR (turquoise) | `gar/v1/` | GAR mark's inverted-A glyph |
| GAR (green) | `gar-green/v1/` | GAR mark's inverted-A glyph, green (2025 edition) |
| GAR (red) | `gar-red/v1/` | GAR mark's inverted-A glyph, red/crimson (2015 edition) |
| GAR (blue) | `gar-blue/v1/` | GAR mark's inverted-A glyph, blue |
| Global Platform | `gp/v1/` | GP hexagon cluster |
| IDDRR | `iddrr/v1/` | IDDRR umbrella circle |
| IRP | `irp/v1/` | IRP globe/leaf mark (2025) |
| MCR2030 | `mcr/v1/` | MCR 2030 badge on purple |
| PreventionWeb | `pw/v1/` | PW angular mark |
| SFVC | `sfvc/v1/` | SFVC colour blocks |
| Stop Disasters | `stop-disasters/v1/` | Globe + warning triangle |
| UNDRR | `undrr/v1/` | UN emblem |
| WRRC | `wrrc/v1/` | Globe mark |
| WTAD | `wtad/v1/` | Tsunami wave circle |

## Files per brand

Each brand directory contains:

| File | Size | Purpose |
|------|------|---------|
| `source-icon.png` | 512px | Source artwork (not served, used for regeneration) |
| `favicon.ico` | 32x32 | Legacy browser fallback |
| `apple-touch-icon.png` | 180x180 | iOS home screen bookmark |
| `favicon-192.png` | 192x192 | Android / PWA icon |
| `favicon-512.png` | 512x512 | PWA splash screen |

## Recommended markup

Replace `{brand}` with the directory name (e.g. `undrr`, `pw`, `mcr`):

```html
<link rel="icon" href="https://assets.undrr.org/favicons/{brand}/v1/favicon.ico" sizes="32x32">
<link rel="icon" href="https://assets.undrr.org/favicons/{brand}/v1/favicon-192.png" sizes="192x192" type="image/png">
<link rel="apple-touch-icon" href="https://assets.undrr.org/favicons/{brand}/v1/apple-touch-icon.png">
```

For PWA `manifest.json`:

```json
{
  "icons": [
    { "src": "https://assets.undrr.org/favicons/{brand}/v1/favicon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "https://assets.undrr.org/favicons/{brand}/v1/favicon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}
```

## Regenerating

To regenerate all favicon sizes from source icons:

```bash
npm run generate-favicons          # All brands
npm run generate-favicons -- pw    # Single brand
```

Requires ImageMagick 7+ (`magick` command).

## Adding a new brand

1. Create `favicons/{brand}/v1/`
2. Add a square `source-icon.png` (512px minimum, transparent background)
3. Run `npm run generate-favicons -- {brand}`
4. Commit the generated files

## Versioning

Follow the repo-wide immutability rule: never modify files in an existing version directory. To update a brand's favicons, create a `v2/` directory.

The current generator writes to `v1/`. For an existing brand, generation must be
adapted to target the new version directory before running it; do not overwrite
the published set. Update the affected consumer mappings and documentation when
introducing a new brand or version.