PWA-Icons fehlen auf Android? So behebst du es

Dein Android-PWA-Icon fehlt, wenn das Web App Manifest keine gültigen icons-Einträge hat, die JSON-Datei nicht erreichbar ist oder die deklarierten Größen nicht zu den Dateien auf dem Server passen. Chrome und andere Chromium-Browser lesen das Manifest für Homescreen-Verknüpfungen und Installationsdialoge. Sie übernehmen dein Tab-Favicon nicht automatisch.

Dieser Artikel erklärt, warum das Manifest zählt, wie du die richtigen 192x192- und 512x512-Icons einbindest und wie du alles auf der Live-URL prüfst, bevor du den nächsten Build ausrollst.

Schnelle Diagnose

Tab-Favicon und PWA-Icon erfüllen unterschiedliche Aufgaben. Browser laden link rel="icon" für Tabs. Android liest manifest.json für Verknüpfungen und installierte Apps. Du brauchst beides. Die Gesamtübersicht aller Größen findest du in Favicon-Größen - Leitfaden.

Warum Android dein Tab-Favicon ignoriert

Wenn jemand in Chrome auf Android „Zum Startbildschirm hinzufügen" tippt, sucht der Browser dein Manifest. Ist icons leer oder zeigen die URLs ins Leere, fällt Chrome auf einen Seiten-Screenshot oder ein generisches Platzhalter-Icon zurück. Dein scharfes 32x32-Tab-Icon spielt dabei keine Rolle.

Der Manifest-Link muss im HTML-Head stehen:

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

Die Manifest-Datei braucht einen gültigen JSON-Content-Type und HTTP 200. Redirect-Schleifen oder 404 auf /manifest.webmanifest bedeuten: keine PWA-Icons.

Mindest-Icon-Set für Android

Google empfiehlt mindestens zwei PNG-Größen:

• 192x192 - Homescreen-Verknüpfung, App-Drawer
• 512x512 - Splashscreen, Install-UI

Beispiel im Manifest:

{
  "name": "Meine App",
  "short_name": "MeineApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3367d6",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Jedes src muss auf eine echte PNG in exakt dieser Pixelgröße zeigen. "sizes": "192x192" bei einer 512x512-Datei führt auf manchen Launchern zu unscharfer Skalierung.

Schritt-für-Schritt-Fix

1. Manifest-Verlinkung und Erreichbarkeit prüfen

Öffne den Seitenquelltext der Produktions-URL. Suche nach rel="manifest". Kopiere den href-Wert und rufe ihn im Browser auf. Du solltest rohes JSON sehen, keine HTML-Fehlerseite.

Typische Fehler:

• Manifest wird nur per Client-JavaScript eingefügt
• Falscher Pfad auf Unterseiten (href="manifest.json" statt /manifest.json)
• Manifest hinter Login oder Geo-Block

Setze den Manifest-Link ins serverseitig gerenderte HTML. Frameworks wie Next.js können das über Metadata oder eine statische Datei in public/ lösen.

2. Icons-Array ergänzen oder reparieren

Fehlt icons, füge die 192- und 512-Einträge von oben ein. Exportiere beide PNGs aus einem quadratischen Master ab 512x512. Verkleinere für 192. Skaliere niemals ein kleines Favicon hoch.

Für maskable Icons (adaptive Icons ab Android 8+) setze "purpose": "maskable" oder "purpose": "any maskable". Maskable Icons brauchen Safe-Zone-Padding, damit der OS-Kreis dein Logo nicht abschneidet. Details dazu im PWA-Icon-Größen-Leitfaden.

3. Pfade zum Deploy-Output abgleichen

CI-Pipelines und Static Hosts lassen manchmal den icons/-Ordner weg. Nach dem Deploy jede Icon-URL direkt aufrufen:

https://deineseite.de/icons/icon-192x192.png
https://deineseite.de/icons/icon-512x512.png

404 auf einer der URLs bedeutet fehlendes Homescreen-Icon, auch wenn das Manifest-JSON perfekt aussieht.

4. Cache leeren und erneut testen

Chrome cached Manifeste aggressiv. Teste im Inkognito-Fenster oder nach Löschen der Site-Daten. Alte Homescreen-Verknüpfung entfernen und neu anlegen.

Favicon Check mit deiner URL starten. Das Tool parst das Manifest, listet jedes Icon und lässt dich jede Datei herunterladen, um die Pixel zu prüfen.

Maskable vs. any

Adaptive Android-Icons wenden eine Kreis- oder Squircle-Maske an. "purpose": "any" zeigt das Icon unverändert. "purpose": "maskable" folgt Googles Safe-Zone: wichtiger Inhalt im inneren 80%-Kreis.

Praktisches Setup mit vier Einträgen:

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

Nur "any"-Icons funktionieren trotzdem. Maskable-Varianten sehen auf Pixel- und Samsung-Launchern sauberer aus.

Häufige Fehler

Leeres icons-Array

Starter-Templates liefern manchmal "icons": [] als Platzhalter. Lighthouse markiert das. Android zeigt ein generisches Icon.

Falscher MIME-Type

PNG als image/png ausliefern. application/octet-stream bricht selten die Anzeige, verwirrt aber Audit-Tools.

Nur ein 512x512-Eintrag

Ein großes Icon kann reichen, weil Chrome herunterskaliert. Explizites 192x192 vermeidet Unschärfe und erfüllt PWA-Checklisten.

Manifest auf falscher Origin

Liegt die App auf app.example.de, Icons aber auf example.de/icons/... ohne CORS, schlagen Cross-Origin-Installs fehl.

apple-touch-icon für iOS vergessen

Dieser Artikel fokussiert Android. iOS nutzt link rel="apple-touch-icon", nicht das Manifest. Beide Plattformen abdecken. Siehe Apple Touch Icon Größe für 180x180.

Manifest-Icons vs. HTML-Favicons

Standard-Favicon-Tags brauchst du weiterhin für Tabs. Das Manifest ersetzt sie nicht. Vollständiges Setup:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Favicon per HTML einbinden erklärt die Tags. Dieser Artikel deckt die Manifest-Seite ab.

Debugging mit Browser-Tools

In Chrome DevTools: Application > Manifest. Das Panel zeigt erkannte Icons, Fehler und Installierbarkeit. Rote Einträge bedeuten meist 404-Pfade oder Größen-Mismatch.

Lighthouse PWA meldet fehlende Icons ebenfalls. Manifest-Probleme zuerst lösen, bevor du Service-Worker-Scores jagst.

Für einen schnellen Ein-URL-Audit kombiniert Favicon Check HTML-Link-Tags, /favicon.ico, apple-touch-icon und Manifest-Icons in einem Report.

Framework-spezifische Manifest-Platzierung

Wo du Manifest-Icons definierst, hängt vom Stack ab. Die Regel bleibt: Produktion muss JSON unter stabiler Public-URL mit erreichbaren PNG-Pfaden ausliefern.

Next.js App Router: manifest.webmanifest oder manifest.json in app/ oder public/. Metadata-API oder statische Datei. Icon-PNGs in public/icons/. Nach next build prüfen, ob Dateien im Output liegen, bevor du live gehst.

Vite / React SPA: Manifest in public/ neben Icons. Vite kopiert public/ ins dist-Root. Häufiger Bug: /icons/... im JSON, Dateien nur unter src/assets/.

WordPress: Plugins wie Super PWA oder Theme-Funktionen schreiben Manifest-JSON. Konflikte, wenn Plugin und Theme parallel manifestieren. Eine Quelle der Wahrheit. Icons ins Media Library oder Theme-Verzeichnis, absolute Pfade ab Root.

Static Site Generators (Hugo, Eleventy, Astro): Manifest beim Build erzeugen. Gehashte Dateinamen nur nutzen, wenn du src nach jedem Deploy aktualisierst. Stabile Pfade wie /icons/icon-192.png vereinfachen Cache und Audits.

Nach jedem Framework-Deploy Favicon Check auf der Produktions-URL laufen lassen, nicht nur localhost.

Vorher-Nachher-Checkliste

Diese Liste nutzen, wenn ein fehlendes PWA-Icon gemeldet wird:

1. Seitenquelltext zeigt link rel="manifest" mit root-relativem href
2. Manifest-URL liefert JSON mit HTTP 200
3. icons-Array hat mindestens 192x192 und 512x512
4. Jede src-URL öffnet direkt im Browser mit korrekten PNG-Dimensionen
5. type ist image/png für jedes PNG-Icon
6. apple-touch-icon 180x180 existiert für iOS-Nutzer mit Lesezeichen statt Install
7. Tab-Favicons existieren laut Favicon per HTML einbinden
8. Favicon Check zeigt erfolgreichen Fetch für jedes Manifest-Icon

Scheitert Schritt 4, zuerst Static Hosting oder CDN-Pfadregeln fixen. Kein JSON-Tuning repariert 404 auf der PNG-Datei.

Warum der Unterschied zwischen Install und Shortcut wichtig ist

Android unterscheidet „Zum Startbildschirm hinzufügen" (Shortcut) und „App installieren" (PWA). Beide lesen Manifest-Icons, aber Install-Prompts prüfen strenger. Fehlendes 512x512 fällt bei Install eher auf als bei einem einfachen Shortcut.

Ein Shortcut kann manchmal noch ein generisches Icon zeigen, während der Tab dein Favicon korrekt rendert. Das verwirrt Product Owner, weil „die Seite" scheinbar stimmt. Erkläre intern: Tab-Icon und Homescreen-Icon sind getrennte Assets. Marketing liefert 512x512 und 192x192, Entwicklung bindet sie ins Manifest, QA prüft mit Favicon Check auf Staging und Produktion.

CDN und Cache-Header für Manifest-Icons

Manifest-JSON und Icon-PNGs brauchen sinnvolle Cache-Header. Zu aggressives Caching auf dem Manifest verzögert Icon-Updates nach Deploy. Zu kurzes Caching auf PNGs erhöht Bandbreite unnötig.

Pragmatischer Mix:

• Manifest: kurzes max-age oder must-revalidate während aktiver Entwicklung, länger in Produktion mit Versionierung in Dateinamen bei Rebrand
• PNG-Icons: langes Cache ok, wenn du bei Änderung den Dateinamen oder Query-String bumpst

Cloudflare und andere CDNs können alte Manifest-Versionen ausliefern, während HTML schon neue Icon-Pfade referenziert. Nach Deploy: Purge für Manifest-Pfad und betroffene PNGs, dann erneut Favicon Check scannen.

FAQ

Warum funktioniert das PWA-Icon am Desktop, aber nicht auf Android?

Desktop-Install und Android-Homescreen nutzen unterschiedliche Code-Pfade. Android verlangt Manifest-Icons bei 192x192 und idealerweise 512x512. Desktop kann auf Favicon oder Seiten-Metadaten zurückfallen.

Kann ich SVG-Icons im Web App Manifest nutzen?

Die Spec erlaubt SVG teilweise, Android Chrome erwartet für Install-Icons zuverlässig PNG. Für Produktions-PWAs PNG ausliefern.

Brauche ich einen Service Worker für das Homescreen-Icon?

Nein. Das Icon kommt aus dem Manifest. Ein Service Worker gehört zu vollen PWA-Install-Kriterien in Chrome, fehlende Icons sind fast immer ein icons-Array-Problem.

Was passiert bei Größen-Mismatch zwischen JSON und Datei?

Browser zeigen das Bild oft trotzdem, skalieren aber unvorhersehbar. Lighthouse warnt. Exakte Dimensionen exportieren.

Wie aktualisiere ich ein Homescreen-Icon nach dem Deploy?

PNG tauschen, bei Bedarf Cache-Buster im src (icon-192.v2.png), alte Verknüpfung löschen, neu anlegen. Manifest-Cache kann stundenlang halten.

Reicht favicon.ico für PWA?

Nein. Root-favicon.ico deckt Legacy-Tab-Requests. Android-Homescreen-Icons kommen nur aus Manifest-icons.

Unterschied fehlende PWA-Icons vs. fehlendes Favicon?

Fehlendes Favicon betrifft Tabs und Lesezeichen. Fehlende PWA-Icons betreffen Android-Homescreen, Install-Banner und Splashscreens. Beides braucht separate Datei-Sets.

Wie teste ich vor dem Launch?

Produktions-URL in Favicon Check einfügen. Manifest-Parse, Icon-HTTP-Status prüfen und jedes PNG herunterladen.

Fazit

Android-PWA-Icons leben im Web App Manifest, nicht in deinen Tab-Favicon-Tags. Manifest im Server-HTML verlinken, 192x192- und 512x512-PNGs mit korrekten Pfaden deklarieren, maskable Varianten wenn möglich, Live-URL mit Favicon Check prüfen. Die meisten Meldungen zu fehlenden Icons verschwinden, sobald das icons-Array auf echte Dateien auf derselben Origin zeigt.