Was ein maskierbares Icon ist
Wenn jemand eine Web-App installiert, zeigt der Launcher ihr Icon in seiner eigenen Form: auf einem Smartphone als Kreis, auf einem anderen als abgerundetes Quadrat oder als Tropfen. Wie ein gewöhnliches Icon mit transparentem Hintergrund in diese Form eingepasst wird, entscheidet die Plattform. Ein maskierbares Icon ist fürs Zuschneiden gemacht: Es füllt das ganze Quadrat mit einem eigenen Hintergrund, sodass jede Form, die der Launcher ausschneidet, ein vollständiges, farbiges Icon ergibt.
Das Web-App-Manifest kennzeichnet den Unterschied mit dem Mitglied purpose jedes Icons. Die W3C-Spezifikation nennt drei Zwecke, any, maskable und monochrome, und ein Icon ohne purpose zählt als any.
Der sichere Bereich: ein Kreis mit 40 % Radius
Die Spezifikation legt fest, wo Grafik vor jeder Maske sicher ist: „ein Kreis, dessen Mittelpunkt in der Mitte des Icons liegt und dessen Radius 2/5 (40 %) der Icon-Größe beträgt“. Bei einem Icon mit 512 px ist das ein zentrierter Kreis mit 410 px Durchmesser. MDN beschreibt denselben Bereich als Kreis, dessen Durchmesser 80 % des Icons beträgt, und web.dev warnt, dass der äußere Rand, etwa 10 % auf jeder Seite, abgeschnitten werden kann.
Das Bild zeigt das maskierbare Icon aus dem Beispielpaket weiter unten. Auf der ersten Kopie ist der sichere Bereich eingezeichnet; die anderen drei sind dieselbe Datei unter einer runden, einer abgerundet-quadratischen und einer tropfenförmigen Maske. Weil das Zeichen im Kreis bleibt, lässt jede Maske es vollständig, nur der Hintergrund ändert seine Form.
Der Favicon-Generator passt die Grafik selbst, nicht ihren umgebenden Rahmen, in den Kreis ein, abzüglich des gewählten Innenabstands. Ein rundes Zeichen kann den sicheren Bereich deshalb fast ganz ausfüllen, während ein quadratisches Foto kleiner ausfällt, weil auch seine Ecken in den Kreis passen müssen.
Purpose any oder maskable: warum zwei Dateien
Ein Icon kann "purpose": "any maskable" angeben, und der Manifest-Artikel von web.dev nutzt diese Form. Der eigene Artikel von web.dev zu maskierbaren Icons rät davon ab: Ein Icon mit Innenabstand für die Maske wirkt zu klein, wo es ungeschnitten angezeigt wird. Die Quellen widersprechen sich, und zwei Dateien umgehen den Kompromiss. Das Icon mit any behält seine Transparenz, und seine Grafik füllt das Quadrat; das Icon mit maskable hat den randlosen Hintergrund und die Grafik im sicheren Bereich.
| Purpose | Hintergrund | Grafik | Wo es erscheint |
|---|---|---|---|
any |
Transparent | Füllt das Quadrat, abzüglich Innenabstand | Überall, wo ein Icon ungeschnitten angezeigt wird |
maskable |
Deine Hintergrundfarbe, von Rand zu Rand | Im 40-%-Kreis | Launcher, die Icons auf eine Form zuschneiden |
Ein Manifest mit beiden Arten
Das ist die site.webmanifest aus dem Beispielpaket. Die Icon-Pfade sind relativ: Die Spezifikation löst src wie start_url gegen die URL des Manifests selbst auf, die Icons funktionieren also in jedem Ordner, solange sie neben dem Manifest liegen.
{
"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": "/"
}
Verlinke es auf jeder Seite mit <link rel="manifest" href="/site.webmanifest">. Die Spezifikation nennt .webmanifest als registrierte Dateiendung und empfiehlt, die Datei als application/manifest+json auszuliefern, obwohl jeder JSON-Typ akzeptiert wird.
Die Größen sind nicht willkürlich. Laut der im September 2026 aktualisierten Installationsanleitung von MDN installieren Chromium-Browser eine Web-App unter anderem nur dann, wenn ihr Manifest einen Namen oder Kurznamen, eine start_url, einen display-Modus und Icons mit 192 und 512 px hat und die Website über HTTPS ausgeliefert wird. Safari funktioniert anders: Das WebKit-Team schrieb zu Safari 26, dass es keine Voraussetzungen für die Installation gibt und Manifest-Icons verwendet werden, wenn eine Website sie definiert. MDN empfiehlt außerdem, von einer Grafik mit mindestens 1.024 px im Quadrat auszugehen; eine kleine Bitmap, die auf 512 px hochskaliert wird, gewinnt keine Details hinzu.
So testest du ein maskierbares Icon
Öffne in Chrome die DevTools, geh zu Application → Manifest und setz das Häkchen bei Show only the minimum safe area for maskable icons. Der Icon-Bereich zeigt dann jedes maskierbare Icon auf den sicheren Bereich zugeschnitten: Fehlt dort etwas Wichtiges, kann es auch ein Launcher abschneiden. Die Chrome-Dokumentation beschreibt diese Option. web.dev verweist außerdem auf Maskable.app, eine Website eines Drittanbieters, auf der du ein Icon unter mehreren Masken in der Vorschau sehen kannst. Der letzte Test ist eine installierte App auf einem echten Smartphone.
Ein echtes Beispiel zum Herunterladen
Die Icons oben stammen aus einem Durchlauf des Favicon-Generators mit dem eigenen Zeichen dieser Website (ein eingechecktes SVG, kein Upload von jemandem), mit 8 % Innenabstand und dem Hintergrund #e8efff. Genau diese Dateien erstellt das Tool. Lade das Beispielpaket herunter (ZIP), um jede Datei samt README zu sehen. Für die Seite des Browser-Tabs desselben Pakets lies SVG, PNG oder ICO als Favicon.