Icônes de PWA : rendez votre app installable
L'invite d'installation n'est pas un choix de design, c'est une checklist. Oubliez l'icône de 192 ou celle de 512 et le navigateur refuse silencieusement de proposer l'installation. Voici l'ensemble exact.
L'invite d'installation est conditionnée par les icônes
Un navigateur ne propose d'installer un PWA que lorsque le manifest remplit un ensemble d'exigences, et les icônes en font partie. Concrètement, le tableau icons doit inclure au moins un PNG 192x192 et un 512x512. Oubliez l'un des deux et l'invite ne se déclenche jamais, sans aucune erreur que l'utilisateur remarquerait.
Le 192 est l'icône du launcher. Le 512 alimente l'écran de démarrage et les affichages à plus haute densité. Les deux doivent être de vrais PNG à ces dimensions exactes, pas une image étirée par CSS.
Rendez-le installable
- 1
Exportez les deux PNG obligatoires
Créez icon-192.png en 192x192 et icon-512.png en 512x512. Ce sont les deux que l'invite d'installation vérifie.
- 2
Ajoutez une version maskable
Exportez un 512x512 avec votre marque centrée dans la zone de sécurité et du padding autour, puis marquez-le purpose: maskable pour qu'Android puisse le recadrer en cercle, squircle ou carré arrondi.
- 3
Listez-les tous dans le manifest
Placez chaque icône dans le tableau icons du manifest avec son src, sizes, type et purpose. Voir le code ci-dessous pour le format exact.
- 4
Reliez le manifest et l'apple-touch-icon
Ajoutez <link rel="manifest" href="/manifest.json"> et un <link rel="apple-touch-icon"> distinct dans votre head. iOS lit le second, pas le manifest.
- 5
Vérifiez l'invite
Ouvrez votre site dans Chrome, vérifiez que le contrôle d'installation apparaît, et confirmez que le manifest n'a pas d'erreurs dans le panneau application des outils de dev du navigateur.
Le tableau icons du manifest
{
"name": "Your App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a1a1a",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Le 192 et le 512 avec purpose any satisfont l'exigence d'installation. L'entrée maskable permet à Android de recadrer l'icône sans couper votre marque.
Pourquoi le maskable est séparé
Les launchers Android recadrent les icônes selon la forme qu'utilise le thème de l'appareil. Une icône normale qui remplit tout le carré se fait couper les coins. Une icône maskable a sa marque centrée dans une zone de sécurité avec du padding, pour que le launcher puisse recadrer les bords sans toucher à la partie importante.
Vous gardez tout de même une icône purpose any à côté de la maskable. Les surfaces qui ne masquent pas (l'onglet, le sélecteur de tâches) utilisent la version any pour ne pas se retrouver avec du padding en trop.
Questions fréquentes
Pourquoi l'invite d'installation de mon PWA n'apparaît-elle pas ?
La cause liée aux icônes la plus fréquente est l'absence d'un PNG 192x192 ou 512x512 dans le tableau icons du manifest. Les deux sont obligatoires. Vérifiez aussi que le manifest est bien relié et servi, et que l'app est en HTTPS avec un service worker.
De quelles tailles d'icône un PWA a-t-il besoin ?
Un PNG 192x192 et un 512x512 dans le manifest sont obligatoires pour l'invite d'installation. Ajoutez une version maskable de 512x512 pour Android et un apple-touch-icon de 180x180 pour iOS.
Ai-je besoin d'une icône maskable ?
Pour Android, oui. Sans elle, le launcher recadre votre icône pleine page et coupe les coins. Une icône maskable garde votre marque dans une zone de sécurité pour qu'elle survive à n'importe quelle forme.
Le manifest définit-il l'icône de l'écran d'accueil iOS ?
Non. iOS ignore les icons du manifest pour « Ajouter à l'écran d'accueil ». Il utilise la balise link apple-touch-icon, donc il vous en faut une dans votre head même si le manifest est complet.