Web-App-Manifest-Icons erklärt (2026)

Web-App-Manifest-Icons sind PNG-Bilder in deiner site.webmanifest, die Android, Chrome und installierbare PWAs für Home-Screen-Verknüpfungen, Splash-Screens und Install-Banner nutzen. Sie sind getrennt vom kleinen Favicon im Browser-Tab. Fehlen Manifest-Icons oder sind sie falsch, kann der Tab ok aussehen, während „Zum Home-Bildschirm“ einen Platzhalter zeigt.

Dieser Guide erklärt Manifest-Größen, das purpose-Feld, maskable Icons und die HTML-Anbindung ohne kaputte Desktop-Favicons.

Manifest-Icons vs Tab-Favicons

Zwei Systeme, zwei Dateiquellen.

Ohne Manifest-Icons funktionieren Desktop-Tabs weiter. Android-Branding und PWA-Install-UX brechen. Ohne Tab-Favicons passiert das Gegenteil. Produktions-Sites brauchen beides.

Die Gesamtübersicht: Favicon-Größen-Guide. Hier geht es nur um den Manifest-Teil.

Minimales Manifest-Icon-Setup

Gültiger Einstieg in site.webmanifest:

{
  "name": "Beispiel App",
  "short_name": "Beispiel",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Im HTML verlinken:

<link rel="manifest" href="/site.webmanifest">

Ohne diesen Tag ignorieren Browser die JSON-Datei, auch wenn sie im Repo liegt.

Warum 192×192 und 512×512

• 192×192 - Android-Home-Screen-Basis, Chrome-Install-UI
• 512×512 - Splash-Screens, hochauflösende Install-Oberflächen

Google behandelt das Paar als Kern für PWAs. Auch Marketing-Sites profitieren, wenn Nutzer sie auf dem Handy anpinnen.

Das purpose-Feld - any vs maskable

Optionales purpose-Array:

{
  "src": "/icon-512-maskable.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

Android adaptive Icons schneiden Außenbereiche. Logos bis zum Rand werden abgeschnitten. Maskable Icons halten kritische Grafik in der mittleren 80%-Safe-Zone.

Empfehlung 2026:

1. 512×512 und 192×192 mit "purpose": "any".
2. Zweites Paar mit "purpose": "maskable", wenn Android-Installs wichtig sind.
3. Oder ein maskable Master mit "purpose": "any maskable".

Flache Logos ohne Rand wirken auf Android kaputt. Design-Fehler, kein Cache-Bug. Siehe Häufige Favicon-Fehler.

Vollständiges Manifest mit maskable Icons

{
  "name": "OpenGraph Check",
  "short_name": "OG Check",
  "description": "Open Graph und Favicon prüfen",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-192x192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/android-chrome-512x512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Dateinamen sind frei wählbar. Pfade müssen echte URLs auf deiner Origin sein.

SVG und ICO gehören nicht ins Manifest

Die Spec zielt auf PNG für breite Client-Unterstützung. SVG oder ICO in "icons" funktionieren auf Android-Install-Flows nicht zuverlässig.

Desktop-SVG-Favicons bleiben im HTML. Siehe SVG-Favicon-Anleitung.

iOS braucht weiter:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Manifest-Icons ersetzen apple-touch-icon auf iPhones nicht.

Wie Browser Manifest-Icons laden

1. HTML laden.
2. Parser findet <link rel="manifest" href="...">.
3. JSON laden (gültig, Content-Type: application/manifest+json oder application/json).
4. Bei Install oder Home-Screen: bestes sizes-Match plus purpose.

Scheitert Schritt 2, laufen 3 und 4 nie. Favicon Check meldet fehlende Manifest-Links und listet geparste Icon-URLs.

start_url, scope und Icon-Cache

Manifest-Icons cachen getrennt von Tab-Favicons. PNG tauschen ohne Cache-Busting lässt alte Home-Screen-Icons Tage stehen. Strategien in Favicon-Cache erklärt.

Schritt für Schritt - Manifest-Icons ergänzen

1. 192×192 und 512×512 PNG aus Brand-Master exportieren.
2. Optional maskable Varianten mit Safe-Zone-Padding.
3. PNGs unter öffentlichem Pfad ablegen.
4. site.webmanifest mit korrektem src, sizes, type, purpose pflegen.
5. <link rel="manifest" href="/site.webmanifest"> im serverseitigen <head>.
6. Bestehende rel="icon"- und apple-touch-icon-Tags behalten.
7. Manifest mit korrektem MIME-Type ausliefern.
8. Live-URL mit Favicon Check scannen.
9. Auf Android Chrome „Zum Home-Bildschirm“ testen.

HTML-Vorlagen: Favicon-HTML-Beispiel.

Typische Manifest-Fehler

Icons in JSON, kein HTML-Link

Häufigster stiller Fehler. JSON existiert in Git, erreicht den Browser-Parser nie.

Falsche sizes-Schreibweise

"192x192", nicht "192" oder "192px".

512×512-Datei mit nur 256×256 Pixeln

Metadaten und echte Pixel müssen passen. Upscale wirkt weich. Siehe Favicon unscharf.

Nur 192×192-Eintrag

Manche Oberflächen wollen 512×512. Beides liefern.

Manifest hinter Login

Install-Flows laden anonym. Nur öffentliche URLs.

Ungültiges JSON

Trailing Comma bedeutet null Icons. Vor Deploy validieren.

theme_color und background_color

Steuern Android-Statusleiste und Splash-Hintergrund beim PWA-Start. Ersetzen keine Icon-Dateien, beeinflussen aber den ersten Eindruck neben 512×512-Splash-Grafik.

Manifest-Icons testen

Manuell: View-Source, /site.webmanifest im Browser öffnen, jede src-URL auf 200 PNG prüfen, Android Home-Screen testen.

Automatisch: Favicon Check auf Production. Workflow: Was ist ein Favicon Checker?.

Komplett fehlende Icons: Favicon wird nicht angezeigt.

Manifest-Icons ohne Voll-PWA

Service Worker sind optional. Jede Site, die Nutzer auf dem Handy anpinnen, sollte Icons deklarieren. Blogs, Docs und SaaS-Landingpages eingeschlossen.

display-Modi und Icon-Nutzung

display ändert nicht, ob Icons geparst werden. Es ändert, wie Chrome die App nach dem Tippen auf den Shortcut öffnet.

icons src mit absoluten URLs

CDN oder Asset-Subdomain:

{
  "src": "https://cdn.example.com/icons/android-chrome-512x512.png",
  "sizes": "512x512",
  "type": "image/png"
}

Erlaubt, wenn CORS und HTTPS stimmen. Same-Origin-Pfade sind einfacher zu auditieren. Nach CDN-Umzug Manifest src und HTML link-Tags synchron halten.

Mehrere Manifest-Dateien vermeiden

Manche Stacks liefern /manifest.json und /site.webmanifest. Der Browser nutzt nur die in HTML verlinkte Datei. Duplikate mit abweichenden Icon-Pfaden erzeugen schwer debugbare Abweichungen.

Fix: Eine kanonische Manifest-URL, Redirects von Legacy-Pfaden, ein Eintrag in Favicon-HTML-Beispiel.

Lighthouse und PWA-Audit

Lighthouse meldet fehlende 192/512 Icons oder falsche purpose-Werte. CI-Gate:

1. Production-URL scannen
2. Lighthouse PWA-Kategorie oder Favicon Check Manifest-Parse
3. Deploy blocken bei 404 auf Manifest-Icons

Ersetzt keinen Android-Home-Screen-Test, fängt JSON-Tippfehler früh.

Maskable Safe Zone in der Praxis

Kritisches Logo muss in der mittleren Safe Zone eines 512×512 Canvas bleiben. Äußere 10-20% sind Padding für Android-Formen. Separate Dateien für "any" und "maskable", wenn Padding-Anforderungen unterschiedlich sind.

id, name und short_name vs icons

Manifest-Metadaten beeinflussen Install-Dialog, nicht welche PNG geladen wird. Trotzdem konsistent halten:

{
  "id": "/",
  "name": "Meine Firma GmbH",
  "short_name": "Firma",
  "icons": [ ... ]
}

short_name erscheint unter dem Home-Screen-Icon. Zu langer Text wird abgeschnitten. Icon-Grafik und Kurzname zusammen testen auf einem echten Android-Gerät.

scope und start_url Fehler

start_url außerhalb von scope bricht PWA-Install-Flows. Icons laden trotzdem, aber QA-Teams verwechseln Manifest-Fehler mit Icon-Fehlern. JSON gegen Spec validieren, bevor Icon-Pfade debuggt werden.

Häufige Support-Fragen zu Manifest-Icons

„Tab zeigt neues Logo, Handy nicht“ - Tab nutzt rel="icon", Home Screen Manifest. Beide Systeme in Favicon Check prüfen.

„Maskable sieht abgeschnitten aus“ - Safe Zone verletzt, kein Bug. Neues maskable PNG exportieren.

„Manifest 404“ - <link rel="manifest"> fehlt oder falscher Pfad. Favicon-HTML-Beispiel copy-pasten.

JSON online validieren

Vor Deploy site.webmanifest in einem JSON-Linter prüfen. Ein fehlendes Komma nach dem icons-Array bricht den gesamten Parse - dann erscheinen null Manifest-Icons trotz korrekter PNG-Dateien auf dem Server. Nach Fix erneut Favicon Check und Android Home-Screen stichprobenartig testen.

icons und related_applications

related_applications und Store-Links ändern nichts an Pflicht-PNGs. Play-Store-Badge im Manifest ersetzt keine 512×512 Datei. Icons-Array bleibt Pflicht für Home-Screen-Branding.

Von favicon.ico Generator zu Manifest

RealFaviconGenerator und ähnliche Tools liefern oft ein Paket mit ICO, PNG, manifest und HTML-Snippet. Nach Import in dein Projekt:

1. Snippet in Layout <head> einfügen, nicht nur Dateien ablegen
2. Pfade an deine Ordnerstruktur anpassen
3. Production scannen - Generatoren nutzen manchmal relative Pfade

Das Snippet aus Favicon-HTML-Beispiel mit Generator-Output abgleichen. Fehlt ein Tag im Snippet, manuell ergänzen.

Zusammenspiel mit apple-touch-icon

Manifest-Icons und apple-touch-icon bedienen unterschiedliche Plattformen. iOS liest nicht zuverlässig aus dem Manifest für Home-Screen-Icons. Beide Systeme parallel pflegen, auch wenn die PNGs visuell identisch aussehen. Gleiche 512×512-Quelle, Export nach 180×180 und 192/512 vereinfacht Konsistenz. Favicon Check listet HTML-Tags und Manifest-Einträge nebeneinander - Abweichungen fallen sofort auf.

Kurzfassung Manifest-Pflichtfelder

Neben icons sollten name, start_url und display gesetzt sein. Fehlende Felder invalidieren nicht immer Icons, aber Install-Dialoge wirken unfertig. theme_color und background_color verbessern Splash neben 512×512 PNG.

FAQ

Sind Manifest-Icons Pflicht?

Rechtlich nein. Für Android-Home-Screen und Chrome-Install erwartet.

Welche Größen für PWA-Manifest-Icons?

192×192 und 512×512 PNG. Maskable Varianten bei adaptivem Cropping.

Ersetzen Manifest-Icons favicon.ico?

Nein. Tabs nutzen weiter /favicon.ico und rel="icon".

Eine PNG für beide Manifest-Größen?

Geht mit derselben 512×512-Datei und unterschiedlichen sizes-Strings. Echte 192×192 spart Traffic.

Was ist ein maskable Icon?

PNG mit Padding für Android-Formen. "purpose": "maskable".

Tab ok, Home Screen falsch?

Tab nutzt rel="icon". Home Screen nutzt Manifest. Manifest-PNGs fixen.

Manifest-Icons ohne Android-Handy prüfen?

Favicon Check parst Manifest-Einträge von der Live-URL.

Manifest-Link absolute URL?

Root-relative /site.webmanifest reicht same-origin. CDN mit HTTPS ist ok.

Fazit

192×192 und 512×512 PNG in site.webmanifest, Manifest im HTML verlinken, maskable Varianten wenn Android zählt. Manifest-Icons ergänzen Tab-Favicons und apple-touch-icon. JSON, MIME-Types und Live-Pfade mit Favicon Check prüfen. Größen: Favicon-Größen-Guide.