Maskable Icon: Safe Zones und das purpose-Feld
Ein Maskable Icon ist ein PWA-Icon, das sein gesamtes Quadrat ausfüllt, damit die Plattform es in die von ihr genutzte Form beschneiden kann (Kreis, Squircle, abgerundetes Quadrat), ohne etwas Wichtiges abzuschneiden. Du hältst das Logo innerhalb einer Safe-Zone von etwa den inneren 80 Prozent – einem zentrierten Kreis, dessen Durchmesser 80 Prozent der Icon-Breite beträgt – und lässt den Hintergrund bis an alle vier Kanten laufen. Du deklarierst es im Web-App-Manifest mit "purpose": "maskable".
Das Problem, das es löst
Android-Launcher legen über jedes App-Icon eine Formmaske, damit ein Home-Bildschirm einheitlich aussieht, und die Form variiert je nach Gerät und Launcher: Kreis auf dem einen, Squircle auf dem anderen, abgerundetes Quadrat auf einem dritten. Ein normales Web-Icon, das an dieses System übergeben wird, wird in eine weiße abgerundete Box geschrumpft oder, schlimmer noch, durch das Logo beschnitten.
Ein Maskable Icon ist für diesen Zuschnitt gestaltet. Die Grafik reicht bis an jede Kante, und der bedeutungstragende Inhalt sitzt weit innen, sodass jede dieser Masken auf Hintergrund statt auf der Bildmarke landet. Es ist dieselbe Idee wie Androids adaptive Icons, ausgedrückt als ein Bild plus eine Deklaration.
Eines deklarieren
"icons": [
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]Liefere beide aus. Das Icon mit Standard-purpose wird dort verwendet, wo die Plattform nicht beschneidet; das Maskable dort, wo sie es tut.
Safe-Zone nach Icon-Größe
| Icon-Größe | Safe-Zone-Durchmesser (80 %) | Freier Rand je Kante |
|---|---|---|
| 192x192 | 154px | 19px |
| 384x384 | 307px | 38px |
| 512x512 | 410px | 51px |
FAQ zu Maskable Icons
Kann ich einfach Rand zu meinem bestehenden Icon hinzufügen?
Das ist der größte Teil der Arbeit, aber der Rand muss gefüllter Hintergrund sein statt Transparenz. Ein transparenter Rand gibt dem Launcher nichts zum Hineinschneiden, und du endest mit einem kleinen Logo auf einer schlichten weißen Kachel.
Wie prüfe ich, ob die Safe-Zone stimmt?
Lege einen zentrierten Kreis bei 80 Prozent der Icon-Breite darüber und bestätige, dass nichts Wichtiges ihn kreuzt, installiere dann die PWA auf einem Android-Gerät und sieh dir den Launcher an. Auch die Chromium-DevTools zeigen Manifest-Icons unter dem Application-Panel als Vorschau.
Verwendet iOS Maskable Icons?
Nein. iOS nimmt das Home-Bildschirm-Icon vom apple-touch-icon-Link und legt seine eigene feste Maske mit abgerundeten Ecken an, sodass der maskable-purpose dort keine Wirkung hat.