Qu’est-ce qu’une icône maskable ?
Quand quelqu’un installe une web app, le lanceur affiche son icône dans sa propre forme : un cercle sur un téléphone, un carré arrondi ou une goutte sur un autre. La façon dont une icône ordinaire à fond transparent est placée dans cette forme dépend de la plateforme. Une icône maskable est faite pour être rognée : elle remplit tout le carré avec son propre fond, si bien que, quelle que soit la forme découpée par le lanceur, le résultat est une icône complète et colorée.
Le manifeste de l’application web marque la différence avec le membre purpose de chaque icône. La spécification du W3C prévoit trois valeurs, any, maskable et monochrome, et une icône sans purpose compte comme any.
La zone de sécurité : un cercle de 40 % de rayon
La spécification définit l’endroit où le visuel est à l’abri de tout masque : « un cercle dont le centre est au centre de l’icône et dont le rayon fait 2/5 (40 %) de la taille de l’icône ». Sur une icône de 512 px, c’est un cercle centré de 410 px de diamètre. MDN décrit la même zone comme un cercle dont le diamètre fait 80 % de l’icône, et web.dev prévient que le bord extérieur, environ 10 % de chaque côté, peut être rogné.
L’image montre l’icône maskable du pack d’exemple présenté plus bas. La première copie montre la zone de sécurité ; les trois autres sont le même fichier sous un masque circulaire, un masque en carré arrondi et un masque en goutte. Comme le logo reste dans le cercle, chaque masque le laisse entier : seul le fond change de forme.
Le générateur de favicon place le visuel lui-même, et non son cadre englobant, dans le cercle, moins la marge que vous choisissez. Un logo rond peut donc remplir presque toute la zone de sécurité, alors qu’une photo carrée sera plus petite, car ses coins doivent aussi tenir dans le cercle.
Purpose any ou maskable : pourquoi deux fichiers
Une icône peut déclarer "purpose": "any maskable", et l’article de web.dev sur le manifeste utilise cette forme. Mais l’article de web.dev consacré aux icônes maskable la déconseille : une icône avec la marge prévue pour le masque paraît trop petite là où elle s’affiche sans masque. Les sources ne sont pas d’accord, et deux fichiers évitent ce compromis. L’icône any garde sa transparence et son visuel remplit le carré ; l’icône maskable a un fond qui va jusqu’aux bords et le visuel dans la zone de sécurité.
| Purpose | Fond | Visuel | Où elle s’affiche |
|---|---|---|---|
any |
Transparent | Remplit le carré, moins la marge | Partout où une icône s’affiche sans rognage |
maskable |
Votre couleur de fond, d’un bord à l’autre | Dans le cercle de 40 % | Lanceurs qui rognent les icônes à une forme |
Un manifeste avec les deux types
Voici le site.webmanifest du pack d’exemple. Les chemins des icônes sont relatifs : la spécification résout src, comme start_url, par rapport à l’URL du manifeste lui-même, si bien que les icônes fonctionnent depuis n’importe quel dossier tant qu’elles sont à côté du manifeste.
{
"name": "png2svg.art",
"short_name": "png2svg",
"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-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0a2d8f",
"background_color": "#e8efff",
"display": "standalone",
"start_url": "/"
}
Reliez-le depuis chaque page avec <link rel="manifest" href="/site.webmanifest">. La spécification désigne .webmanifest comme extension de fichier enregistrée et recommande de le servir en application/manifest+json, même si tout type JSON est accepté.
Les tailles ne sont pas choisies au hasard. D’après le guide d’installabilité de MDN, mis à jour en septembre 2026, les navigateurs Chromium n’installent une web app que si, entre autres conditions, son manifeste comporte un nom ou un nom court, une start_url, un mode display et des icônes de 192 et 512 px, et que le site est servi en HTTPS. Safari fonctionne autrement : pour Safari 26, l’équipe WebKit a écrit qu’il n’y a aucune exigence d’installabilité et que les icônes du manifeste sont utilisées quand un site en définit. MDN conseille aussi de partir d’un visuel d’au moins 1 024 px de côté : une petite image matricielle agrandie à 512 px ne gagne aucun détail.
Comment tester une icône maskable
Dans Chrome, ouvrez les DevTools, allez dans Application → Manifest et cochez l’option qui n’affiche que la zone de sécurité minimale des icônes maskable (Show only the minimum safe area for maskable icons dans les DevTools en anglais). La section des icônes montre alors chaque icône maskable découpée à la zone de sécurité : s’il y manque quelque chose d’important, un lanceur risque de le couper aussi. La documentation de Chrome décrit cette option. web.dev renvoie aussi vers Maskable.app, un site tiers qui permet de prévisualiser une icône sous plusieurs masques. La vérification finale reste une app installée sur un vrai téléphone.
Un vrai exemple à télécharger
Les icônes ci-dessus viennent d’un seul passage du générateur de favicon sur le logo de ce site (un SVG versionné dans notre dépôt, pas le fichier importé par quelqu’un), avec une marge de 8 % et un fond #e8efff. Ce sont exactement les fichiers que crée l’outil. Téléchargez le pack d’exemple (ZIP) pour voir chaque fichier avec son README. Pour la partie onglet du navigateur de ce même pack, lisez le guide favicons SVG, PNG ou ICO.