PWA-Icon-Größen - 192x192 und 512x512 erklärt

Progressive Web Apps brauchen zwei zentrale Manifest-Icon-Größen: 192x192 für Homescreen-Verknüpfungen und 512x512 für Splashscreens und Install-Banner. Diese PNG-Dateien stehen im icons-Array des Web App Manifests, getrennt von Browser-Tab-Favicons. Fehlt eine Größe, zeigt Android nach der Installation oft ein generisches graues Icon.

Dieser Leitfaden erklärt, wofür jede Dimension da ist, wie Manifest-Einträge strukturiert werden, maskable-Regeln und wie du Icons auf der Live-URL prüfst.

Warum PWA-Icons keine Favicons sind

Browser-Tabs laden Icons aus link rel="icon" und /favicon.ico. Installierte PWAs und Android-Homescreen-Verknüpfungen laden aus manifest.json:

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

Im Manifest:

"icons": [
  { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
]

Wer nur Tab-Favicon-Größen einrichtet und das Manifest übersieht, hat scharfe Tabs und kaputte Install-Icons.

Gesamtübersicht: Favicon-Größen - Leitfaden.

192x192 - Homescreen und App-Drawer

192x192 px ist die Standardgröße für Android-Launcher. Chrome nutzt sie bei:

• Zum Startbildschirm hinzufügen
• PWA im App-Drawer nach Installation
• Verknüpfungen in Shortcut-Listen

Design-Hinweise:

• Quadratisches PNG, volle Hintergrundfarbe wirkt oft sauberer
• Aus 512-px-Master verkleinern mit scharfer Filterung
• Exakte Größe in "sizes": "192x192"

Manche Checklisten akzeptieren nur 512x512 und skalieren herunter. Explizites 192x192 vermeidet Unschärfe und erfüllt Lighthouse PWA-Audits.

512x512 - Splashscreen und Install-UI

512x512 px erscheint in:

• Android-PWA-Splashscreen beim Laden
• Chrome-Install-Dialog
• Store-ähnlicher Darstellung installierbarer Web-Apps

Splashscreens kombinieren background_color, theme_color, Name und 512-Icon. Niedrige Auflösung wirkt auf großen Phones peinlich weich.

Volle 512x512 exportieren. Nicht aus 192 hochskalieren.

background_color und theme_color

{
  "background_color": "#ffffff",
  "theme_color": "#1a73e8",
  "icons": [
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Mismatch zwischen Icon-Hintergrund und background_color erzeugt sichtbare Kanten beim Splash.

Maskable Icons und purpose-Feld

Android 8+ unterstützt adaptive Icons mit Kreismasken. Icons mit "purpose": "maskable" oder "any maskable":

{
  "src": "/icons/icon-192-maskable.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "maskable"
}

Maskable-Grafik hält das Logo in der Safe Zone (ca. 80% Durchmesser). Vollflächige Logos werden an den Rändern beschnitten.

Empfohlenes Set:

Minimum: 192 und 512 mit "purpose": "any".

Vollständiges Manifest-Beispiel

{
  "name": "Mein Produkt",
  "short_name": "Produkt",
  "description": "Installierbare Web-App",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3367d6",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Manifest im HTML verlinken. Favicon per HTML einbinden für Head-Tags neben Favicons.

Export-Workflow aus einem Master

1. 512x512 quadratischen Brand-Master anlegen (Vektor bevorzugt).
2. 512x512 PNG fürs Manifest exportieren.
3. Auf 192x192 PNG mit scharfer Ausrichtung verkleinern.
4. Master mit Extra-Padding für maskable-Varianten duplizieren.
5. Optional 16/32 in favicon.ico für Tabs (favicon.ico erstellen).

Niemals aus 32x32 Tab-Art auf 512x512 hochskalieren.

Typische PWA-Icon-Fehler

Leeres icons-Array

Templates mit "icons": []. Vor PWA-Label fixen.

404 auf Icon-Pfaden

Manifest parst, Icons scheitern. Icon-URLs nach Deploy direkt aufrufen.

Falscher sizes-String

Datei 256x256, JSON sagt "512x512". Audits scheitern.

Nur SVG im Manifest

Android Chrome erwartet zuverlässig PNG. PNG in Produktion.

apple-touch-icon für iOS vergessen

Manifest-Icons ersetzen kein 180x180 apple-touch-icon. Siehe Apple Touch Icon Größe.

Icons auf CDN ohne CORS

Cross-Origin-Manifest-Icons brauchen CORS bei anderer Origin.

Fehlende PWA-Icons debuggen

Symptome und Fixes überlappen mit PWA-Icons fehlen auf Android. Schnellchecks:

1. DevTools Application > Manifest
2. Lighthouse PWA
3. Favicon Check - Manifest-Parse + Icon-Download

Alte Homescreen-Verknüpfung nach Fix entfernen. Android cached aggressiv.

Lighthouse und Installierbarkeit

Chrome Lighthouse PWA prüft, ob Manifest-Icons 192x192 und 512x512 mit korrekten sizes-Strings enthalten. Fehlende Icons blockieren perfekte PWA-Scores, auch wenn Service Worker und HTTPS stimmen.

Installierbarkeit in Chrome braucht weitere Felder: name, start_url, display, theme_color. Icons sind nötig, aber nicht hinreichend. Manifest-Icons zuerst fixen, weil Endnutzer sie sofort sehen.

Lighthouse in CI auf Staging-URLs nach jedem Deploy, der public/icons/ oder Manifest-JSON betrifft. Automatisierte Runs mit manuellem Favicon Check kombinieren - schneller als volles Lighthouse pro Commit.

Splashscreen im Detail

Startet ein Nutzer eine installierte PWA, baut Android den Splash aus:

• background_color als Vollfläche
• Zentriertes 512x512-Icon (oder bestes großes Icon)
• Optional App-Name aus name

Ist das 512-Icon fotografisch oder hat Transparenzlöcher, wirkt der Splash gegen background_color unruhig. Flache Markenfarbe hinter der Markierung im 512-PNG selbst nutzen.

theme_color färbt die Statusleiste beim Start. Abweichung zwischen Statusleiste, Splash-Hintergrund und Icon-Padding wirkt unfertig.

Install auf Mid-Range-Android testen, nicht nur Emulatoren. Emulatoren verbergen Kompressions- und Skalierungs-Artefakte.

Staging vs. Produktion

Teams prüfen PWA-Icons oft auf localhost mit anderen Manifest-Pfaden als in Produktion. Immer die öffentliche Install-URL scannen.

Typische Staging-Lücken:

• Basic Auth blockiert Manifest- oder Icon-Fetches für externe Tools
• Relative Icon-Pfade funktionieren auf localhost-Subpaths, scheitern am CDN-Root
• Icon-Ordner fehlt im Produktions-Deploy-Skript

Favicon Check nach DNS-Cutover auf Produktion. Icon-Dateigrößen mit Staging vergleichen, um falsche Asset-Promotion zu erwischen.

Play Store TWA und Trusted Web Activity

Teams, die PWAs als Android-Apps verpacken (Trusted Web Activity), brauchen weiterhin korrekte Manifest-Icons. Der Play Store zieht Store-Listing-Grafiken separat, aber der Launcher-Icon-Flow auf dem Gerät startet oft beim 192-Manifest-Eintrag.

Maskable 512-Icons verbessern auch TWA-Präsentation auf Geräten mit adaptivem Launcher. Investition in saubere 192/512 lohnt sich über reinen Browser-Shortcut hinaus.

Icon-Design für enge Launcher-Grids

Android-Launcher pressen viele Apps in enge Zeilen. Dein 192x192-Icon konkurriert mit nativen Apps nach Material-Richtlinien. Hoher Kontrast und zentrierte Glyphen gewinnen auf den ersten Blick.

Dünne Outline-Icons verschwinden auf bunten Hintergründen. 192-PNG auf hellen und dunklen Launcher-Themes testen, wenn Nutzer Android stark anpassen.

Das 512-Asset zählt für ersten Eindruck bei Install und Splash. Design-Zeit dort investieren, auch wenn du denkst, Nutzer sehen nur 192 im Drawer.

Versionierung im Manifest bei Rebrand

Bei Marken-Update alle Manifest-Icon-Dateien tauschen und optional Dateinamen versionieren (icon-512.v2.png). src im JSON anpassen. Alte Homescreen-Verknüpfungen zeigen sonst wochenlang das alte Icon.

Manifest und Icons gemeinsam deployen. Halb deployte Zustände (neues JSON, alte PNG) erzeugen 404 oder falsche Größen in Audits.

Nach Deploy erneut Favicon Check und Lighthouse auf Produktion.

Abstimmung zwischen Design und Entwicklung

Design-Handoff sollte benannte Exporte enthalten:

• icon-192-any.png
• icon-512-any.png
• Optionale maskable Varianten mit Safe-Zone-Overlay

Entwickler mappen Dateinamen auf Manifest-JSON. Abweichung zwischen Dateiname und sizes-Feld erzeugt Lighthouse-Warnungen.

Gemeinsames Review auf Staging: Designer installiert PWA auf Android-Phone, Entwickler bestätigt Manifest-Fetch in Favicon Check. Padding- und Farbfehler vor Marketing-Launch finden.

Implementierungs-Docs mit Favicon per HTML einbinden verlinken, damit Manifest-Link-Tag neben Icons-Ordner nicht vergessen wird.

Fehlende Größen erkennen ohne Rätselraten

Symptome in Produktion:

• Install-Banner zeigt weiches Icon: oft fehlendes oder niedrig aufgelöstes 512x512
• Homescreen-Verknüpfung unscharf: 192x192 fehlt, Browser skaliert 512 herunter
• Lighthouse meldet „Manifest does not have icons": leeres Array oder ungültige Einträge
• Favicon Check listet Manifest-Icons rot: Pfad, CORS oder 404

Fix-Reihenfolge: HTTP-Status der PNGs, dann JSON-Inhalt, dann Cache auf Testgerät. Nicht zuerst Service Worker debuggen, wenn nur Icons fehlen.

Details zu Android-Homescreen-Fällen: PWA-Icons fehlen auf Android.

Manifest-Icons in CMS und Baukästen

WordPress, Webflow und Shopify haben unterschiedliche PWA- und Favicon-UI. Prüfe, ob das CMS Manifest-JSON generiert und ob Icon-Uploads wirklich unter /icons/ landen.

Bei Headless-Setups liegt das Manifest oft im Frontend-Repo, Icons im Asset-CDN. Cross-Origin nur mit korrekten CORS-Headern.

Nach CMS-Migration Manifest-URL und Icon-Pfade mit Favicon Check gegen altes System vergleichen. Häufiger Regressionspunkt bei Relaunches.

Kombiniere 192 und 512 mit korrekten Tab-Favicons und apple-touch-icon, damit keine Plattform zurückfällt, während du PWA ausrollst. Die Favicon-Größen - Leitfaden Übersicht hilft beim Sprint-Planning.

Plane im Backlog einen Icon-Audit-Task vor jedem Release, der Manifest-JSON, PNG-Bytes und Homescreen-Vorschau auf einem Referenz-Android-Gerät abdeckt. Favicon Check automatisiert den HTTP- und Parse-Teil. So verhinderst du, dass PWA-Icons in Production regressieren, während das Team an Features arbeitet.

Wie 192 und 512 zu anderen Größen passen

Jede Größe hat eine eigene Fläche. Eine 512-px-Datei ersetzt keine durchdachten kleineren Exporte ohne Qualitätsverlust.

FAQ

Welche PWA-Icon-Größen sind Pflicht?

Minimum 192x192 und 512x512 PNG im Manifest. Maskable-Varianten für Android empfohlen.

Reicht nur 512x512?

Chrome skaliert für 192-Kontexte. Explizites 192x192 ist Best Practice.

Welches Format für Manifest-Icons?

PNG mit "type": "image/png". JPEG vermeiden bei flachen Logo-Farben.

Was ist ein maskable Icon?

Icon für OS-Masken mit Safe-Zone-Padding. Deklariert mit "purpose": "maskable".

Ersetzen PWA-Icons favicon.ico?

Nein. Tab-Favicons und root favicon.ico behalten. Manifest-Icons sind zusätzlich.

Wo liegen Manifest-Icon-Dateien?

Typisch /icons/ oder Root. src-Pfade müssen zum Deploy passen.

Wie teste ich PWA-Icon-Größen live?

Favicon Check. Liest Manifest-Icons, meldet HTTP-Status und Dimensionen.

Install ok, Splash falsch?

Oft falscher background_color oder weiche 512-Quelle. Voll auflösen, Farben abstimmen.

Fazit

PWAs brauchen 192x192- und 512x512-PNG-Icons im Web App Manifest, plus maskable Versionen für saubere Android-adaptive Icons. Aus hochwertigem quadratischen Master exportieren, Manifest im Server-HTML verlinken, mit Favicon Check prüfen. Tab-Favicons und Manifest-Icons ergänzen sich, sie ersetzen sich nicht. Wer beide Größen sauber liefert, vermeidet die häufigsten Android-Homescreen-Beschwerden vor dem ersten Support-Ticket.