Icône maskable : zones de sécurité et le champ purpose
Une icône maskable est une icône PWA dessinée pour remplir tout son carré afin que la plateforme puisse la rogner à la forme qu'elle utilise (cercle, squircle, carré arrondi) sans couper quoi que ce soit d'important. Vous gardez le logo à l'intérieur d'une zone de sécurité correspondant environ aux 80 % centraux, un cercle centré dont le diamètre vaut 80 % de la largeur de l'icône, et vous laissez le fond déborder jusqu'aux quatre bords. Vous la déclarez dans le manifeste d'application web avec "purpose": "maskable".
Le problème qu'elle résout
Les lanceurs Android appliquent un masque de forme à chaque icône d'application pour qu'un écran d'accueil paraisse cohérent, et la forme varie selon l'appareil et le lanceur : cercle sur l'un, squircle sur un autre, carré arrondi sur un troisième. Une icône web normale confiée à ce système se retrouve rétrécie dans une boîte blanche arrondie, ou pire, rognée à travers le logo.
Une icône maskable est conçue pour ce rognage. Le visuel s'étend jusqu'à chaque bord, et le contenu significatif se situe bien à l'intérieur, de sorte que n'importe lequel de ces masques tombe sur le fond plutôt que sur la marque. C'est la même idée que les icônes adaptatives d'Android, exprimée sous forme d'une seule image plus une déclaration.
En déclarer une
"icons": [
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]Livrez les deux. L'icône à purpose par défaut est utilisée là où la plateforme ne rogne pas ; la maskable est utilisée là où elle le fait.
Zone de sécurité selon la taille de l'icône
| Taille de l'icône | Diamètre de la zone de sécurité (80 %) | Marge libre par bord |
|---|---|---|
| 192x192 | 154px | 19px |
| 384x384 | 307px | 38px |
| 512x512 | 410px | 51px |
FAQ sur les icônes maskable
Puis-je simplement ajouter du rembourrage à mon icône existante ?
C'est l'essentiel du travail, mais le rembourrage doit être un fond rempli plutôt que de la transparence. Une marge transparente ne donne au lanceur rien à rogner et vous vous retrouvez avec un petit logo sur une simple tuile blanche.
Comment vérifier que la zone de sécurité est correcte ?
Superposez un cercle centré à 80 % de la largeur de l'icône et confirmez que rien de ce qui vous importe ne le franchit, puis installez la PWA sur un appareil Android et regardez le lanceur. Les DevTools de Chromium prévisualisent aussi les icônes de manifeste sous le panneau Application.
iOS utilise-t-il les icônes maskable ?
Non. iOS prend l'icône de l'écran d'accueil dans la balise link apple-touch-icon et applique son propre masque fixe à coins arrondis, donc le purpose maskable n'a aucun effet là.