Checklist Favicon et assets PWA 2025 — Manifestes, icônes et signaux SEO

Publié: 18 sept. 2025 · Temps de lecture: 4 min · Par la rédaction de Unified Image Tools

On observe encore sur de nombreux sites des oublis dans les manifestes et les icônes. Les quatre écueils fréquents : tailles manquantes, mauvaises références vers des manifestes localisés, incohérence de theme‑color, et mélange des chemins entre PWA et favicon. Suivez l’ordre ci‑dessous pour limiter les oublis.

1) Jeu d’icônes minimal

• 16px/32px : onglet/signet (ICO possible)
• 192/512 : installation PWA (PNG recommandé)
• Pour Safari pinned tab, fournir un SVG monochrome
• Vérifier transparence/marges en thèmes clair/sombre sur appareil réel

2) Localiser le manifeste par locale

• Dans chaque locale (p. ex. /fr/manifest.webmanifest), traduire name/short_name/description
• Vérifier que start_url et scope pointent vers la racine de la locale (en /fr, pas /en)
• Dans le HTML du layout, référencer <link rel="manifest" href="/fr/manifest.webmanifest">

3) Couleur de thème et cohérence

• Aligner theme_color du manifeste et <meta name="theme-color"> dans le HTML
• Vérifier la lisibilité en clair/sombre (l’icône ne doit pas se fondre)
• Prévoir apple-touch-icon en 180 px minimum ; vérifier l’arrondi

4) Signaux SEO et câblage HTTP

• Éviter les chemins d’icône en 404 (écarts Dev/Prod)
• Ne pas bloquer icônes/manifestes dans robots.txt
• Content-Type correct : application/manifest+json

Automatiser avec des outils

• Génération d’icônes : Générateur de favicon
  • Produit 16/32/192/512 à partir du logo ; aperçu des marges
• Assemblage de manifestes localisés : Pack Favicon + Manifest
  • Renseigne name/short_name et vérifie start_url/scope

Pièges d’exploitation

• Seul le manifest.webmanifest racine est référencé → la localisation ne s’applique pas
• En SPA, start_url peut répondre 200 mais être hors scope du Service Worker
• Origines différentes (staging/prod) : OGP relatif → 404 (vérifier aussi le sitemap)

5) Parcours de vérification (pré‑prod)

1. Lister les artefacts (/icons/ et chaque manifest.webmanifest par locale)
2. Mesurer Lighthouse PWA/Best Practices (détecter manques et références erronées)
3. Sur iOS/Safari, tester l’ajout à l’écran d’accueil (arrondi/marges de apple-touch-icon)
4. Sur Android/Chrome, vérifier l’installation (couleur du splash, nom)
5. Contrôler 404/Content‑Type dans l’onglet Network des DevTools

6) Service Worker et cache

• En prod oui ; en développement, mieux vaut désactiver/ne pas enregistrer
• Unifier la gestion de skipWaiting (manuel vs. invite d’update)
• Documenter le nettoyage des anciens caches (noms/versionnage)

Remarque : sur ce site, en développement, le SW existant est automatiquement désenregistré. En exploitation, « invite de mise à jour → accord utilisateur » réduit les risques.

7) Surveillance et régressions

• En CI, vérifier existence/hash des fichiers générés (manques/références obsolètes)
• Comparer les diffs de champs du manifeste par locale (name/short_name/description/start_url/scope)
• Surveiller robots/sitemap (Search Console/Lighthouse)

8) Foire aux questions (FAQ)

• Q. D’autres tailles que 16/32/192/512 sont‑elles nécessaires ?
  • R. Pas obligatoires, mais Windows/anciens Android utilisent parfois 48/96/144. Commencez minimal et étendez selon le produit.
• Q. Favicon en SVG ?
  • R. De plus en plus supporté ; gardez PNG/ICO pour compatibilité. SVG monochrome séparé pour Safari pinned tab.
• Q. Localiser le manifeste comme les chaînes UI ?
  • R. Oui, mais les limites de longueur de name/short_name varient selon la plateforme ; définir une politique d’abréviation.

9) Workflow pratique (E2E)

1. Fixer les guidelines du logo source (marges, taille minimale, thèmes clair/sombre)
2. Générer 16/32/192/512 avec Générateur de favicon
3. Créer les manifestes par locale avec Pack Favicon + Manifest
4. Dans le layout, référencer <link rel="icon"> et <link rel="manifest"> par locale
5. Revoir la lisibilité en clair/sombre ; ajouter un contour si nécessaire
6. En CI, contrôler existence/Content‑Type/liens ; mesurer PWA avec Lighthouse
7. Après la mise en prod, surveiller via Search Console et les logs

Transformez ces étapes en modèle et joignez‑le aux PR pour maintenir la qualité sans dépendance individuelle.