Web-Manifest-Generator für PWA
Web-Manifest-Generator: site.webmanifest oder manifest.json für eine Progressive Web App erstellen, mit Name, theme_color, App-Icons und Prüfhinweisen.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
Web App Manifest für eine PWA
Der Web-Manifest-Generator erstellt die Datei site.webmanifest (oft auch manifest.json genannt). Sie beschreibt eine Website als installierbare App: Name, Kurzname, Startadresse, Anzeigemodus, Farben und App-Icons. Browser wie Chrome, Edge und Safari lesen das Manifest, wenn Nutzer die Seite zum Startbildschirm hinzufügen. Damit ist es der Kern jeder Progressive Web App (PWA). Das Format ist im W3C-Standard „Web Application Manifest“ beschrieben; der richtige MIME-Typ ist application/manifest+json.
Die wichtigsten Felder: name erscheint im Installationsdialog, short_name unter dem Symbol. display: standalone öffnet die App in einem eigenen Fenster ohne Adressleiste. theme_color färbt Titelleiste oder Statusleiste, background_color ist die Farbe des Startbildschirms, bis die Seite geladen ist. Chrome verlangt für die Installation mindestens Icons mit 192 × 192 und 512 × 512 Pixeln. Ein Icon mit purpose: maskable füllt die runden oder eckigen Symbolformen von Android vollständig aus. Die Hinweise über dem Ergebnis prüfen diese Punkte laufend.
Legen Sie die Datei ins Wurzelverzeichnis der Website und binden Sie sie mit dem angezeigten <link rel="manifest"> ein. Für die Installation braucht die Seite außerdem HTTPS. Offline-Funktionen erfordern zusätzlich einen Service Worker; das Manifest allein macht eine Seite nicht offlinefähig. Passende Icons in allen Größen erzeugt der Favicon-Generator.
Anleitung: Web-Manifest-Generator in 4 Schritten
- Im Web-Manifest-Generator Name, Kurzname und Beschreibung der App eintragen.
- Startadresse, Gültigkeitsbereich, Anzeigemodus, Ausrichtung und Sprache festlegen.
- Designfarbe (theme_color) und Hintergrund beim Start (background_color) wählen und die App-Icons je Zeile mit Pfad, Größe und optional purpose angeben.
- Die Hinweise prüfen, den Dateinamen wählen, das Manifest herunterladen und den angezeigten link-Tag in den head jeder Seite einfügen.
Typische Anwendungsfälle
- Website installierbar machen: Ein site.webmanifest anlegen, damit Nutzer die Seite zum Startbildschirm hinzufügen können.
- Progressive Web App: Das Manifest als Grundlage für eine PWA mit eigenem Fenster und App-Icon erstellen.
- Markenauftritt: Titelleiste und Startbildschirm mit theme_color und background_color an die Unternehmensfarben anpassen.
- Fehlersuche: Prüfen, warum Chrome keinen Installieren-Knopf zeigt, etwa wegen fehlender 512-Pixel-Icons.
Häufige Fragen
Was ist der Unterschied zwischen site.webmanifest und manifest.json?
Inhaltlich keiner. Beide enthalten dasselbe JSON. Die Endung .webmanifest ist im Standard empfohlen, manifest.json ist weit verbreitet. Entscheidend ist der Verweis im link-Tag; der Server sollte die Datei als application/manifest+json ausliefern.
Welche Icons braucht ein Web-Manifest?
Mindestens ein Icon mit 192 × 192 und eines mit 512 × 512 Pixeln im PNG-Format. Empfehlenswert ist zusätzlich ein maskable-Icon, bei dem das Motiv mit genug Rand in der Mitte liegt. Für iOS ergänzen Sie ein apple-touch-icon mit 180 × 180 Pixeln.
Wofür steht theme_color?
theme_color legt die Farbe der Titelleiste bzw. der Statusleiste fest, wenn die App installiert ist. Im Browser-Tab nutzen viele Browser stattdessen das Meta-Tag theme-color im head, deshalb sollten beide Werte übereinstimmen.
Reicht ein Manifest für eine Progressive Web App?
Für die Installation in Chrome genügen heute Manifest, Icons und HTTPS. Damit die App auch ohne Internet startet, brauchen Sie zusätzlich einen Service Worker, der Dateien zwischenspeichert.
Warum zeigt Chrome keinen Installieren-Knopf?
Häufige Ursachen: kein HTTPS, fehlende 192- oder 512-Pixel-Icons, display ist browser, die start_url liegt außerhalb von scope oder das Manifest ist nicht erreichbar. In den Entwicklertools unter Anwendung → Manifest zeigt Chrome die genauen Fehler.
Was bedeuten start_url und scope im Web-Manifest?
start_url ist die Adresse, die beim Öffnen der installierten App geladen wird. scope legt fest, welche Adressen zur App gehören; Seiten außerhalb davon öffnet der Browser in seiner normalen Oberfläche. Die start_url sollte innerhalb des scope liegen.
Welchen display-Modus soll ich für meine PWA wählen?
Meist standalone: Die App läuft im eigenen Fenster ohne Adressleiste. minimal-ui behält einfache Steuerelemente wie Zurück, fullscreen eignet sich für Spiele, browser öffnet die Seite wie einen normalen Tab.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
Öffnen