Maskable Icons und die Sicherheitszone
Android schneidet dein App-Icon auf die Form zu, die der Launcher nutzt. Ein maskable Icon ist eines, das für diesen Zuschnitt gemacht ist: randloser Hintergrund, Grafik innerhalb der Sicherheitszone gehalten.
Warum ein normales Icon beschnitten wird
Verschiedene Android-Launcher nutzen verschiedene Icon-Formen. Um sie einheitlich zu halten, nimmt Android dein Icon und schneidet es auf die Form zu, die das Gerät verwendet. Ein Standard-Icon mit einem Logo nah am Rand verliert seine Ecken, und ein Icon mit transparentem Hintergrund bekommt eine hässliche Schnittkante.
Ein maskable Icon ist für diesen Zuschnitt gebaut. Es füllt die gesamte Fläche mit einem Hintergrund, damit es keine Transparenz gibt, und hält alles Wichtige fern von den Rändern, die abgeschnitten werden könnten.
Die Sicherheitszone
Die Regel ist einfach: halte die kritische Grafik innerhalb des inneren Kreises, grob die mittleren 80 Prozent der Fläche. Auf einem 512x512-Icon ist das ein zentrierter Kreis von rund 410 Pixeln Durchmesser. Alles außerhalb ist Freiwild für den Zuschnitt.
Der äußere Ring ist Beschnitt. Er sollte nur Hintergrund sein, kein Logo, kein Text, keine Kante, um deren Verlust es dir leidtäte. Da du nicht weißt, welche Form ein bestimmtes Gerät nutzt, gestalte so, dass das Icon korrekt wirkt, egal ob es als Kreis, Squircle oder abgerundetes Quadrat endet.
Deklariere es im Manifest
{
"icons": [
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Das Feld purpose sagt Android, welches Icon zu maskieren ist. Liefere ein maskable neben deinem Standard-Icon any aus, um beide Fälle abzudecken. Du kannst auch "purpose": "any maskable" an einem einzelnen Icon setzen, wenn es beschnitten und unbeschnitten gut funktioniert.
Häufige Fragen
Was ist ein maskable Icon?
Ein App-Icon, das dafür gemacht ist, den Zuschnitt von Android auf die Launcher-Form zu überstehen. Es hat einen randlosen Hintergrund und hält die wichtige Grafik in einer zentralen Sicherheitszone, damit keine Form das Logo abschneidet.
Wie groß ist die maskable Sicherheitszone?
Halte den kritischen Inhalt innerhalb der inneren 80 Prozent der Fläche, einem zentrierten Kreis. Auf einem 512x512-Icon ist dieser Kreis rund 410 Pixel breit. Behandle alles außerhalb als beschneidbaren Beschnitt.
Wie markiere ich ein Icon als maskable?
Füge dem Icon-Eintrag im icons-Array deines Manifests "purpose": "maskable" hinzu. Liefere es neben einem Icon mit purpose any aus, oder nutze "any maskable" an einem Icon, das beschnitten und unbeschnitten funktioniert.
Warum sieht mein Android-Startbildschirm-Icon beschnitten aus?
Dein Icon ist nicht maskable, also hat Android ein Design beschnitten, das nicht dafür gebaut war. Füge eine maskable Version mit randlosem Hintergrund und Grafik mit Abstand hinzu, und deklariere sie mit purpose maskable.