Manifest-Icons: Das icons-Array in einem Web-App-Manifest
Ein Manifest-Icon ist ein Eintrag im icons-Array eines Web-App-Manifests, der JSON-Datei, die deine Website beschreibt, wenn sie installiert wird. Jeder Eintrag gibt ein src, einen sizes-String, meist einen type und optional ein purpose an, und der Browser wählt die nächstliegende Passform für den Home-Bildschirm, den App-Launcher, den Task-Switcher und den Splashscreen. Deklariere mindestens ein 192x192- und ein 512x512-PNG.
Wofür das Array da ist
Das Web-App-Manifest ist eine JSON-Datei, die aus deinem Head verlinkt wird und einem Browser mitteilt, wie sich deine Website verhalten soll, wenn sie installiert ist: ihr Name, ihre Start-URL, ihr Anzeigemodus, ihre Theme-Farbe und ihre Icons. Manifest-Icons sind die, die außerhalb der Browser-Chrome verwendet werden: der Launcher, der App-Switcher, die Installationsaufforderung, der Splashscreen.
Anders als Favicon-Link-Tags ist das Array eine Liste von Kandidaten statt eine Reihe von Anweisungen. Du beschreibst, was jede Datei ist, und der Browser wählt pro Oberfläche aus. Das bedeutet, dass mehr Einträge zu deklarieren günstig ist: Nichts wird heruntergeladen, bis eine Oberfläche es benötigt.
Ein minimales Manifest
{
"name": "Example App",
"short_name": "Example",
"start_url": "/",
"display": "standalone",
"theme_color": "#0b0b0b",
"background_color": "#ffffff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Verlinke es aus dem Head mit <link rel="manifest" href="/manifest.json">. Die Datei darf auch manifest.webmanifest heißen; entscheidend ist das Link-Tag.
Felder eines Icon-Eintrags
| Feld | Funktion |
|---|---|
| src | Pfad zum Bild, relativ zur Manifest-URL aufgelöst. Erforderlich. |
| sizes | Abmessungen als "BREITExHÖHE" oder mehrere durch Leerzeichen getrennt für eine Datei mit mehreren Größen. |
| type | MIME-Typ, z. B. image/png. Lässt einen Browser Formate überspringen, die er nicht dekodieren kann. |
| purpose | "any" (Standard), "maskable" für Icons, die sich sicher beschneiden lassen, oder "monochrome". |
FAQ zu Manifest-Icons
Warum ausgerechnet 192 und 512?
192x192 ist die Größe, die Android bei gängigen Bildschirmdichten für das Home-Bildschirm-Icon verwendet, und 512x512 ist die Größe für den Splashscreen und die Installationsaufforderung. Zusammen erfüllen sie die Installierbarkeitsprüfungen in Chromium-Browsern.
Ersetzen Manifest-Icons mein Favicon?
Nein. Sie decken nur Oberflächen installierter Apps ab. Browser-Tabs, Lesezeichen und Verlauf kommen weiterhin von deinen link rel="icon"-Tags und /favicon.ico, also liefere beide aus.
Liest iOS die Manifest-Icons?
Safari liest das Manifest für Dinge wie Name und Anzeigemodus, aber das Home-Bildschirm-Icon kommt vom apple-touch-icon-Link. Deklariere beide, wenn das Icon auf iOS und Android stimmen soll.