Les icônes maskable et la zone de sécurité
Android recadre votre icône d'application à la forme utilisée par le lanceur. Une icône maskable est conçue pour survivre à ce recadrage : fond à bords perdus, visuel maintenu à l'intérieur de la zone de sécurité.
Pourquoi une icône normale se fait rogner
Les différents lanceurs Android utilisent des formes d'icône différentes. Pour les garder cohérentes, Android prend votre icône et la recadre à la forme utilisée par l'appareil. Une icône standard avec un logo près du bord perd ses coins, et une icône à fond transparent hérite d'une vilaine ligne de découpe.
Une icône maskable est conçue pour ce recadrage. Elle remplit tout le canevas avec un fond, si bien qu'il n'y a aucune transparence, et elle maintient tout l'essentiel loin des bords qui risquent d'être coupés.
La zone de sécurité
La règle est simple : gardez le visuel essentiel à l'intérieur du cercle intérieur, soit environ les 80 pour cent centraux du canevas. Sur une icône de 512x512, cela correspond à un cercle centré d'environ 410 pixels de diamètre. Tout ce qui est en dehors est susceptible d'être recadré.
L'anneau extérieur est du fond perdu. Il ne doit contenir que du fond, aucun logo, aucun texte, aucun bord dont la perte vous dérangerait. Comme vous ne savez pas quelle forme un appareil donné utilisera, concevez l'icône pour qu'elle se lise correctement qu'elle finisse en cercle, en squircle ou en carré arrondi.
Déclarez-la dans le manifeste
{
"icons": [
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Le champ purpose indique à Android quelle icône masquer. Livrez-en une maskable aux côtés de votre icône any standard pour couvrir les deux cas. Vous pouvez aussi définir "purpose": "any maskable" sur une seule icône si elle fonctionne bien recadrée et non recadrée.
Questions fréquentes
Qu'est-ce qu'une icône maskable ?
Une icône d'application conçue pour survivre au recadrage d'Android à la forme du lanceur. Elle a un fond à bords perdus et maintient le visuel important à l'intérieur d'une zone de sécurité centrale, pour qu'aucune forme ne rogne le logo.
Quelle est la taille de la zone de sécurité maskable ?
Gardez le contenu essentiel à l'intérieur des 80 pour cent centraux du canevas, un cercle centré. Sur une icône de 512x512, ce cercle fait environ 410 pixels de large. Considérez tout ce qui est en dehors comme du fond perdu recadrable.
Comment marquer une icône comme maskable ?
Ajoutez "purpose": "maskable" à l'entrée de l'icône dans le tableau icons de votre manifeste. Livrez-la à côté d'une icône purpose any standard, ou utilisez "any maskable" sur une icône qui fonctionne recadrée et non recadrée.
Pourquoi mon icône d'écran d'accueil Android paraît-elle rognée ?
Votre icône n'est pas maskable, donc Android a recadré un design qui n'était pas prévu pour ça. Ajoutez une version maskable avec un fond à bords perdus et un visuel avec de la marge, et déclarez-la avec purpose maskable.