Was ist manifest.json?
Ein einfacher Guide zu Web Application Manifests und wie sie Progressive Web Apps antreiben.
Das Manifest verstehen
Ein Web Application Manifest, definiert in der W3C-Web-Application-Manifest-Spezifikation, ist eine JSON-Textdatei, die Informationen über eine Webanwendung bereitstellt.
Der häufigste Einsatz eines Web Application Manifests ist es, die Informationen bereitzustellen, die der Browser braucht, um eine Progressive Web App (PWA) auf einem Gerät zu installieren, etwa den Namen und das Icon der App.
Ein Web Application Manifest enthält ein einziges JSON-Objekt, dessen Schlüssel auf oberster Ebene als Members bezeichnet werden.
Warum manifest.json wichtig ist
| Vorteil | Was es bewirkt |
|---|---|
| PWA-Installation | Das Manifest ermöglicht es Browsern, Nutzern die Installation deiner Web-App auf ihrem Gerät anzubieten, sodass sie sich wie eine native Anwendung anfühlt. |
| Icon-Referenzen | Das Manifest teilt Browsern mit, welche Icon-Dateien für verschiedene Kontexte zu verwenden sind: Startbildschirme, Splash-Screens und App-Launcher. |
| App-Metadaten | Es liefert wesentliche Informationen wie den Namen deiner App, die Theme-Farben, den Anzeigemodus und die Start-URL für ein konsistentes Erlebnis. |
Die Icon-Herausforderung
Eine vollständige manifest.json zu erstellen erfordert, Icons in mehreren Größen zu erzeugen und zu referenzieren. Jede Größe erfüllt einen bestimmten Zweck über verschiedene Plattformen und Kontexte hinweg.
Wofür jede Größe da ist
| Größe | Zweck |
|---|---|
| 192x192 | Standard-Icons für den Android-Startbildschirm |
| 512x512 | Hochauflösende Splash-Screens und Android |
| 96x96 | Desktop-Verknüpfungen und Google TV |
| 32x32 | Browser-Tabs und Lesezeichen |
| 16x16 | Adressleiste und Unterstützung für Legacy-Browser |
Dieselben Größen, in echter Skalierung
Wie Favicon Tools hilft
Alle erforderlichen Icon-Größen manuell zu erstellen und eine manifest.json-Datei zu pflegen, kann zeitaufwendig und fehleranfällig sein. Favicon Tools automatisiert den Prozess.
Wenn du Favicon Tools verwendest, um deine Favicons zu erzeugen, schreiben wir automatisch eine vollständige manifest.json, die alle Icon-Größen referenziert, die du brauchst:
Was das erzeugte Manifest abdeckt
| Icon-Gruppe | Größen | Was es abdeckt |
|---|---|---|
| Android-Icons | 192x192, 512x512 | Startbildschirm-Verknüpfungen und Splash-Screens |
| Standard-Favicons | 16x16, 32x32, 96x96 | Browser-Tabs und Lesezeichen |
| Apple-Touch-Icons | Alle erforderlichen Größen | iOS-Geräte |
| Windows-Kacheln | Kachelgrößen | Integration ins Microsoft-Startmenü |
Beispiel-manifest.json
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/",
"display": "standalone",
"scope": "/",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}
]
}Dieses Manifest enthält alle wesentlichen Icon-Referenzen, die für die PWA-Installation und die korrekte Darstellung auf verschiedenen Plattformen nötig sind. Favicon Tools erzeugt es automatisch zusammen mit allen referenzierten Icon-Dateien.
Generierung mit einem Klick
Lade dein Ausgangsbild einmal hoch, und Favicon Tools erzeugt jede Icon-Größe, die du brauchst, plus eine vollständige manifest.json-Datei, alles in einem herunterladbaren Paket.
Kein manuelles Skalieren von Bildern, kein Anlegen mehrerer Dateien, kein JSON von Hand. Alles ist bereit, um es in dein Projekt zu legen.
Immer aktuell
Wenn du deine Favicons nach einem Rebrand oder Design-Update neu erzeugst, wird die manifest.json mit den korrekten Icon-Referenzen aktualisiert.
Das verhindert, dass dein Manifest aus dem Takt mit deinen tatsächlichen Icon-Dateien gerät, was genau das ist, was kaputte Referenzen und fehlende Icons erzeugt.