Bild- und Asset-Tools

Kostenlose Web-App-Manifest-Generator

Generiere eine site.webmanifest-JSON-Datei für PWA-fahige statische Websites.

Tool wird geladen...

Was ist Web-App-Manifest-Generator?

Ein Web App Manifest ist eine JSON-Datei, die Browsern mitteilt, wie sich Ihre Webanwendung verhalten soll, wenn sie auf dem Gerät eines Benutzers installiert wird. Es steuert den App-Namen, Symbole, Farben und das Startverhalten. Für statische Seiten auf GitHub Pages ist ein Manifest der entscheidende Schritt, um die Site als Progressive Web App installierbar zu machen.

Kurze Antwort

Ein Web App Manifest steuert, wie Ihre Site aussieht, wenn sie auf einem Geräte-Startbildschirm installiert wird. Es legt den App-Namen, Symbole, die theme-color und das Startverhalten für PWA-fähige statische Sites fest.

Last updated: 2026-06-11

Einschränkungen

  • Das Manifest funktioniert nur über HTTPS. HTTP-Seiten können das Manifest nicht für Installationsaufforderungen verwenden.
  • Das Manifest erfordert tatsächliche Icon-Bilddateien an den angegebenen Pfaden. Fehlende oder falsch benannte Icons führen zur Ablehnung des Manifests durch den Browser.
  • Das Installationsverhalten unterscheidet sich zwischen Android und iOS. Android verwendet das Manifest für Installationsaufforderungen, während iOS auf Apple touch icon meta-Tags angewiesen ist.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie Ihren Site-Namen und einen optionalen Kurznamen ein, der unter 12 Zeichen liegt.
  2. Wählen Sie den Anzeigemodus: standalone entfernt die Browser-Chrome für ein app-ähnliches Erlebnis.
  3. Legen Sie Icon-Pfade zu PNG-Bildern in empfohlenen Größen wie 192x192 und 512x512 fest.
  4. Kopieren Sie das generierte Manifest-JSON und speichern Sie es als site.webmanifest im Site-Wurzelverzeichnis.

Wofür du es nutzen kannst

  • Eine statische Dokumentationsseite auf mobilen Startbildschirmen installierbar machen.
  • PWA-Metadaten zu einem Blog hinzufügen, damit wiederkehrende Leser ihn wie eine App starten können.
  • Ein Web App Manifest vorbereiten, bevor eine Site bei einem PWA-Verzeichnis eingereicht wird.

Anwendungsfalle

Praxisbeispiele

Beispiel

Tool-Site mit Standalone-Modus

Eine statische Site mit browserbasierten Werkzeugen setzt display auf standalone und theme-color passend zu ihrem korallenfarbenen Markenakzent. Android-Besucher können die Site zum Startbildschirm hinzufügen.

Beispiel

Blog mit minimalem Manifest

Ein persönlicher Blog verwendet nur name, short name und ein 192x192 Icon. display bleibt auf browser. Der Blog erscheint als normale Verknüpfung, zeigt aber ein markiertes Icon auf dem Startbildschirm.

Haufige Fehler

  • Icon-Pfade auf ungültige Speicherorte oder fehlende Dateien setzen, was dazu führt, dass der Browser das Manifest ablehnt.
  • Ein Manifest generieren, aber das <link rel="manifest" href="/site.webmanifest">-Tag im Seiten-Head vergessen, sodass der Browser es nie liest.
  • Den fullscreen- oder standalone-Anzeigemodus für eine inhaltsreiche Site wählen, bei der Nutzer die Adressleiste zur Navigation benötigen.

Überprüfung

  1. Öffnen Sie Chrome DevTools > Application > Manifest, um zu überprüfen, ob das Manifest korrekt geparst wird und Icons zugänglich sind.
  2. Testen Sie die Site über HTTPS auf einem Android-Gerät mit Chrome und bestätigen Sie, dass die 'Zum Startbildschirm hinzufügen'-Aufforderung erscheint.

FAQ

Fragen zu Web-App-Manifest-Generator

Wo sollte ich die Manifest-Datei platzieren?

Platzieren Sie site.webmanifest im Site-Wurzelverzeichnis und referenzieren Sie es mit <link rel="manifest" href="/site.webmanifest"> im Seiten-Head. Die Datei muss mit dem MIME-Typ application/manifest+json ausgeliefert werden.

Benötigt eine normale statische Site ein Manifest?

Ein Manifest ist optional, aber empfohlen. Es ist die einzige Möglichkeit zu steuern, wie Ihre Site aussieht, wenn ein Benutzer sie auf dem Startbildschirm speichert.

Welche Icon-Größen werden für PWA benötigt?

Mindestens 192x192 und 512x512 PNG-Icons. Das 192x192-Icon wird für den Startbildschirm verwendet, das 512x512-Icon wird für das installierbare PWA-Abzeichen auf Android benötigt.

Brauche ich einen Service Worker, damit das Manifest funktioniert?

Nein. Das Web App Manifest funktioniert unabhängig von Service Workern. Ein Service Worker wird nur benötigt, wenn Sie vollständige Offline-Funktionalität, Hintergrund-Sync oder Push-Benachrichtigungen wünschen.

Verwandte Tools

Weitere bild- und asset-tools

Auch ausprobieren

Auch ausprobieren

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen