Icônes PWA : éviter les logos coupés et les petites vignettes blanches
Une application web installée utilise des icônes de manifeste. Le lanceur peut leur appliquer un masque de forme.
Préparer les ressources d'application
Des PNG 192×192 et 512×512 constituent un départ, à compléter selon les plateformes. Les chemins relatifs dépendent de l'URL du manifeste. La limite de 256px d'IcoJet ne remplace pas un PNG 512px.
Dessiner une version masquable
Placez l'essentiel dans le cercle central de rayon égal à 40% de la largeur. Prolongez le fond jusqu'aux bords. N'utilisez purpose="maskable" qu'après avoir conçu et vérifié ce cadrage.
Tester l'installation
Inspectez manifeste et aperçu du masque dans le navigateur, puis installez sur l'appareil cible. Vérifiez les variantes normale et masquable. Comparez une ancienne installation incorrecte avec une installation de test neuve.
{
"icons": [
{
"src": "/icons/app-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/app-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/app-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Sources et lectures complémentaires
MDN — Manifest icons ↗web.dev — Web app manifest ↗