UTILS.
100 % im Browser
📱

Web-App-Manifest-Generator (PWA)

Erzeuge ein gültiges PWA-Web-App-Manifest (manifest.json) mit Icons, Theme-Farben und Anzeigemodus plus dem fertigen link rel=manifest-Tag zum Einfügen.

— Ausgabe erscheint hier —
— Ausgabe erscheint hier —

Über dieses Tool

Der Web-App-Manifest-Generator erstellt aus einem einfachen Formular ein gültiges manifest.json für eine Progressive Web App und liefert dir dann die begleitenden HTML-Tags, die du in den <head> deiner Seite einfügst. Alles wird in deinem Browser zusammengesetzt und nichts wird hochgeladen – du kannst das JSON kopieren, es als manifest.json herunterladen oder die Link- und Meta-Tags kopieren.

Ein Web-App-Manifest ist die JSON-Datei, die es ermöglicht, dass eine Website auf einem Homescreen installiert und wie eine native App gestartet wird. Dieses Tool setzt die Standardschlüssel zusammen – name, short_name, description, start_url, scope, display (standalone, fullscreen, minimal-ui oder browser), orientation, theme_color, background_color und ein icons-Array – und lässt jedes leer gelassene Feld weg, damit die Ausgabe sauber bleibt. Jede angehakte Icon-Größe wird zu einem Eintrag mit src, sizes und type (aus der Dateiendung abgeleitet), und der optionale purpose erlaubt es, Icons als maskable zu markieren. Das Ergebnis wird mit JSON.stringify bei zwei Leerzeichen Einrückung serialisiert, sodass es gut lesbar und standardkonform ist.

Verwende den Platzhalter {size} im Icon-Pfad (zum Beispiel /icons/icon-{size}.png), und er wird durch jede Abmessung wie 192x192 und 512x512 ersetzt. Mindestens sollte ein Manifest einen name, eine start_url, einen display-Modus und mindestens ein 192px- und ein 512px-Icon enthalten, was hier die Standardwerte sind. Verweise darauf von deiner Seite mit dem erzeugten <link rel="manifest">-Tag und füge das theme-color-Meta für die Browser-UI hinzu.

Häufig gestellte Fragen

Was ist ein Web-App-Manifest?
Es ist eine JSON-Datei, die deine Progressive Web App beschreibt – ihren Namen, Icons, Farben und wie sie starten soll –, sodass Browser anbieten können, sie auf dem Homescreen zu installieren und in einem app-ähnlichen Fenster zu öffnen.
Welche Felder sind erforderlich?
Ein nützliches Manifest braucht mindestens name (oder short_name), eine start_url, einen display-Modus und Icons von 192x192 und 512x512. Dieser Generator füllt diese standardmäßig; andere Felder sind optional und werden weggelassen, wenn sie leer bleiben.
Was bedeutet 'maskable' bei Icons?
Maskable Icons haben einen sicheren Rand, sodass Plattformen sie in Kreise, Squircles oder abgerundete Quadrate zuschneiden können, ohne dein Logo abzuschneiden. Setze den purpose auf 'maskable' oder 'any maskable' für Icons, die mit dieser Sicherheitszone gestaltet sind.
Wie installiere ich das Manifest auf meiner Website?
Speichere das JSON als manifest.json, lade es auf deine Website hoch und füge dann das erzeugte <link rel="manifest" href="/manifest.json"> und die theme-color-Meta-Tags in den <head> jeder Seite ein.

Weitere Tools