Les avantages du Manifest.json
Apple, Google et Microsoft continuent de miser sur le Web App Manifest. Remplissez-le une fois et vos icônes, votre theme color et vos analytics se mettent en place partout.
Ce que le manifest vous apporte
| Avantage | Ce que vous obtenez |
|---|---|
| Des prompts d'installation qui semblent natifs | Chrome, Edge et Android n'affichent des bannières « Installer l'app » que si votre manifest déclare icons, name, start_url et le mode de display. |
| Des splash screens prêtes pour le mode hors ligne | Le manifest vous donne le contrôle sur les images de splash, les couleurs de fond et les icônes maskable pour que le lancement hors ligne paraisse intentionnel. |
| Des métadonnées cohérentes partout | Lorsque les moteurs de recherche ou les plateformes sociales inspectent votre manifest, ils reprennent le même titre, la même theme color et les mêmes icônes que ceux que vous avez soignés. |
Anatomie d'un manifest moderne
Voici les champs que Lighthouse et Android inspectent réellement avant d'afficher votre icône.
| Champ | Pourquoi il existe | Conseil de pro |
|---|---|---|
| name & short_name | Contrôle la bannière d'installation et le texte du libellé dans le launcher. | Gardez short_name sous 12 caractères pour qu'il ne soit pas tronqué sur les écrans d'accueil Android. |
| icons[] | Définit quels PNG alimentent les surfaces d'installation, les splash screens et les logos maskable. | Incluez les tailles 192, 256, 384 et 512 avec purpose: "any maskable" pour une couverture optimale. |
| start_url | Détermine quelle route s'ouvre lorsqu'un utilisateur lance l'app depuis son dock. | Ajoutez ?source=pwa et lisez cette valeur côté serveur pour affiner vos analytics. |
| display | Bascule entre les expériences standalone, fullscreen ou minimal-ui. | Utilisez standalone plus theme_color pour rester en phase avec le chrome de votre marque. |
Où commencent les icônes du manifest
JSON de départ
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/?source=pwa",
"display": "standalone",
"scope": "/",
"background_color": "#0f172a",
"theme_color": "#312e81",
"icons": [
{ "src": "/android-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/android-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}Déposez ce fichier dans /public/manifest.json et le générateur intégré à Favicon Tools maintiendra le tableau d'icônes à jour chaque fois que vous exporterez un nouveau jeu.
Checklist de release
Gardez ceci affiché sur votre tableau de bord de déploiement pour que le manifest reste exact après les rebrandings.
- 1
Servez et référencez le manifest
Servez le manifest à /manifest.json et exposez-le via <link rel="manifest" href="/manifest.json">.
- 2
Vérifiez que chaque icône se résout
Assurez-vous que chaque icône référencée existe bien sur votre CDN et correspond à la taille déclarée.
- 3
Alignez le chrome du navigateur
Ajoutez les meta tags theme-color et background_color pour aligner le chrome du navigateur sur la palette de votre icône.
- 4
Lintez et auditez avant la release
Lancez npx next lint ainsi que l'audit PWA de Lighthouse avant chaque release pour repérer les champs de manifest manquants.
- 5
Définissez le scope de l'app installée
Pointez le scope du manifest vers l'URL principale de votre app pour que les raccourcis installables restent dans votre domaine.
Automatisez les mises à jour
Rangez le template de votre manifest à côté de la configuration de vos icônes. Quand la CI construit un nouveau jeu de favicons, mettez à jour le JSON et redéployez le tout ensemble.
Testez comme une app native
Installez votre site sur iOS, Android et Chrome desktop. Vérifiez que la splash screen, le masque de l'icône et la theme color correspondent aux valeurs du manifest.
Les équipes de QA apprécient un checklist simple : installer, lancer hors ligne, inspecter la qualité de l'icône, vérifier le paramètre d'analytics.