Was unterscheidet standalone und minimal-ui?

Standalone blendet die Browseroberfläche komplett aus, die App wirkt nativ. Minimal-ui zeigt oben eine kleine Navigationsleiste (meist Zurück und Neu laden). Fullscreen entfernt sogar die Statusleiste und eignet sich für Spiele.

Welche Icon-Größen brauche ich wirklich?

Mindestens 192×192- und 512×512-PNGs — Chrome und Edge nutzen sie für Startbildschirm und Splash. Ergänzen Sie 144×144 für ältere Windows-Kacheln und ein 512×512-Icon mit `purpose: maskable`, damit Android es ohne Detailverlust beschneiden kann.

Warum brauche ich name UND short_name?

`name` erscheint im Installationsdialog und im App-Drawer; `short_name` steht unter dem Startbildschirm-Icon, wo nur Platz für etwa 12 Zeichen ist. Lassen Sie ihn weg, schneidet das System name auf den meisten Telefonen unschön ab.

Wo legt man die manifest.json ab?

Speichern Sie sie als `manifest.json` (oder `manifest.webmanifest`) im Site-Root und verlinken Sie sie im ` ` mit ` `. Der Browser lädt sie beim ersten Seitenaufruf.

Reicht das Manifest allein, um die Seite installierbar zu machen?

Nein. Der Browser verlangt zusätzlich einen Service Worker, der ein `fetch`-Event behandelt, HTTPS und mindestens ein 192×192-Icon. Das Manifest ist die Metadaten-Schicht; der Service Worker belegt, dass die Seite offline funktioniert.

Manifest.json-Generator

PWA-Manifestdateien erstellen

manifest.json

App-Name

Kurzname

Beschreibung

Start-URL

Geltungsbereich

App-ID

Identifiziert die App eindeutig über Installationen und Ursprünge hinweg. Leer lassen, um auf start_url zurückzufallen. Ein Pfad wie /?app oder eine beliebige feste Zeichenkette funktioniert.

Sprache

BCP-47-Tag der Hauptsprache der App, z. B. de-DE oder ar. Leer lassen, damit das Gerät sie selbst erkennt.

Textrichtung

Kategorien

Durch Kommas getrennte Store-Kategorien, z. B. productivity, utilities. Dienen zur Einordnung der Installation.

Anzeigemodus

Ausrichtung

Themenfarbe

Hintergrundfarbe

Symbole

Quell-URL

Größe

Typ

Zweck

Quell-URL

Größe

Typ

Zweck

Installierbarkeits-Checks

•Kein maskierbares Icon. Android beschneidet ein quadratisches Icon, füge daher eins mit purpose: maskable hinzu.

Vorschau

manifest.json

{
  "name": "Meine App",
  "short_name": "App",
  "description": "Eine progressive Web-Anwendung",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#4A90D9",
  "background_color": "#FFFFFF",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Was ist Manifest.json-Generator?

Der Manifest.json Generator hilft Ihnen, ein vollständiges Web-App-Manifest für Progressive Web Apps zu erstellen. Geben Sie Ihre App-Details ein und erhalten Sie eine einsatzbereite manifest.json mit allen erforderlichen und optionalen Feldern im korrekten Format.

Konfigurieren Sie Name, Kurzname, Beschreibung, start_url, scope, Anzeigemodus (standalone, fullscreen, minimal-ui, browser), Ausrichtung, Designfarbe, Hintergrundfarbe und beliebig viele Icon-Einträge mit Größe, Typ und purpose. Die Ausgabe entspricht der W3C-Web-App-Manifest-Spezifikation, sodass Chrome, Edge und Safari sie beim Hinzufügen zum Startbildschirm erkennen.

Anleitung

Geben Sie die Grundinformationen Ihrer App ein: Name, Kurzname, Beschreibung, Themenfarbe und Hintergrundfarbe.
Konfigurieren Sie den Anzeigemodus (Standalone, Vollbild, Minimal-UI), die Ausrichtung, Start-URL und den Geltungsbereich.
Fügen Sie Icon-Einträge mit Größenangaben hinzu und kopieren oder laden Sie die generierte manifest.json für Ihr Projekt herunter.

Wann verwenden

Eine vorhandene Webseite installierbar machen, damit sie in der App-Übersicht des Betriebssystems erscheint.
Splash-Farbe und Icon einer internen PWA für Außendienst-Mitarbeitende anpassen.
Eine minimale manifest.json für ein Next.js- oder Vite-Starter-Template erzeugen, das keine mitbringt.

Ergebnis

Sie wandeln Ihre Rezept-Website in eine PWA um. Setzen Sie den Namen auf 'Meine Rezepte', die Themenfarbe auf Ihr Markengrün, den Anzeigemodus auf 'Standalone' und generieren Sie das Manifest für Ihr Projektverzeichnis.

Häufige Fragen

Was unterscheidet standalone und minimal-ui?: Standalone blendet die Browseroberfläche komplett aus, die App wirkt nativ. Minimal-ui zeigt oben eine kleine Navigationsleiste (meist Zurück und Neu laden). Fullscreen entfernt sogar die Statusleiste und eignet sich für Spiele.
Welche Icon-Größen brauche ich wirklich?: Mindestens 192×192- und 512×512-PNGs — Chrome und Edge nutzen sie für Startbildschirm und Splash. Ergänzen Sie 144×144 für ältere Windows-Kacheln und ein 512×512-Icon mit `purpose: maskable`, damit Android es ohne Detailverlust beschneiden kann.
Warum brauche ich name UND short_name?: `name` erscheint im Installationsdialog und im App-Drawer; `short_name` steht unter dem Startbildschirm-Icon, wo nur Platz für etwa 12 Zeichen ist. Lassen Sie ihn weg, schneidet das System name auf den meisten Telefonen unschön ab.
Wo legt man die manifest.json ab?: Speichern Sie sie als `manifest.json` (oder `manifest.webmanifest`) im Site-Root und verlinken Sie sie im `<head>` mit `<link rel='manifest' href='/manifest.json'>`. Der Browser lädt sie beim ersten Seitenaufruf.
Reicht das Manifest allein, um die Seite installierbar zu machen?: Nein. Der Browser verlangt zusätzlich einen Service Worker, der ein `fetch`-Event behandelt, HTTPS und mindestens ein 192×192-Icon. Das Manifest ist die Metadaten-Schicht; der Service Worker belegt, dass die Seite offline funktioniert.

Manifest.json-Generator

manifest.json

Symbole

Installierbarkeits-Checks

Vorschau

Was ist Manifest.json-Generator?

Anleitung

Wann verwenden

Ergebnis

Häufige Fragen

Ähnliche Tools

Generator für strukturierte Daten

Webseite als PDF

Datenschutzerklärung-Generator

AGB-Generator

Cookie-Einwilligungs-Generator

CSS-Minifizierer

Manifest.json-Generator

manifest.json

Symbole

Installierbarkeits-Checks

Vorschau