# 08 — Favicons : `/favicon.ico` en 404, pas de SVG

> **Spec** : Favicons and app icons — tier **recommended**
> **Verdict** : 🟠 **PARTIAL** · **Priorité : P3**
> **Effort estimé** : 1 h

## Ce qui est conforme

Généré par `gatsby-plugin-manifest` (icônes versionnées `?v=<hash>`) :

- `<link rel="icon">` PNG en 32×32 et 16×16 ✓
- `<link rel="apple-touch-icon">` 180×180 ✓
- `<link rel="manifest" href="/manifest.webmanifest">` avec jeu d'icônes complet 48→512 px ✓

## Problèmes & preuves

| Attendu par la spec | Constat |
|---|---|
| Un vrai fichier ICO multi-résolutions servi à **`/favicon.ico`** | **HTTP 404** |
| Favicon **SVG** (`<link rel="icon" type="image/svg+xml">`) | Absent (`/favicon.svg` → 404) |
| Icônes maskable **séparées** des icônes `any` | Le manifest déclare `purpose: "any maskable"` combiné sur les mêmes entrées — décombiner |

## Impact

- **`/favicon.ico` est demandé « à l'aveugle » pour toujours** : vieux navigateurs, lecteurs RSS, crawlers, outils de preview, agrégateurs SERP (Google fetch le favicon pour l'afficher dans les résultats mobiles) le requêtent directement sans lire le HTML. Chaque requête finit en 404 → logs pollués et, pour certains consommateurs, pas d'icône du tout.
- Sans SVG, l'icône est floue sur les écrans haute densité et ne peut pas s'adapter au dark mode (`prefers-color-scheme` dans le SVG).
- `purpose: "any maskable"` combiné : les plateformes qui appliquent le masque rognent l'icône `any` non prévue pour — les déclarer en entrées distinctes.

## Correctif

Jeu cible (5 fichiers, la spec couvre toutes les surfaces avec ça) :

```html
<link rel="icon" href="/favicon.ico" sizes="32x32">           <!-- ICO multi-res 16+32+48 à la racine -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">    <!-- vectoriel, dark-mode-ready -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">    <!-- 180×180, déjà en place ✓ -->
<link rel="manifest" href="/manifest.webmanifest">            <!-- déjà en place ✓ -->
```

1. Générer `/favicon.ico` multi-résolutions (16+32+48) depuis le logo — ImageMagick : `magick logo.png -define icon:auto-resize=48,32,16 favicon.ico` — et le placer dans `static/` (Gatsby copie `static/` à la racine du build).
2. Créer `/favicon.svg` (le logo vectorisé ; optionnel : `@media (prefers-color-scheme: dark)` dans le SVG).
3. Dans `gatsby-config` (`gatsby-plugin-manifest`), séparer les purposes :
   ```js
   icons: [
     { src: 'icons/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
     { src: 'icons/icon-512-maskable.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
     // …
   ]
   ```
   L'icône maskable doit avoir ~20 % de marge de sécurité autour du logo.

## Vérification

```bash
curl -sI https://www.abc-guepes.com/favicon.ico   # attendu : 200, image/x-icon (ou image/vnd.microsoft.icon)
curl -sI https://www.abc-guepes.com/favicon.svg   # attendu : 200, image/svg+xml
```
- https://realfavicongenerator.net/checker : toutes surfaces vertes.
- Test maskable : https://maskable.app avec l'icône dédiée.