PWA-Icon aktualisiert sich nicht: Manifest, Pfade und Cache prüfen

Wenn sich ein PWA-Icon nicht aktualisiert, prüfe zuerst das Manifest und die Bilder, die der Browser tatsächlich erhält. Ein neues Tab-Favicon ersetzt nicht zwangsläufig das Symbol einer installierten Webanwendung. Beide können aus unterschiedlichen Deklarationen und Caches stammen.

Der Favicon- und PWA-Generator erzeugt Bilddateien und ein Ausgangsmanifest. Beim Veröffentlichen musst du dessen Pfade mit den tatsächlichen Dateipositionen deiner Website abgleichen.

Trenne Tab-Symbol und installiertes App-Icon

Eine Favicon-Deklaration im HTML ist für den Browser-Tab vorgesehen. Die Icon-Einträge im Manifest beschreiben Ressourcen der Webanwendung. Eine Seite kann deshalb bereits das neue Tab-Symbol zeigen, während ein installierter Eintrag eine andere Datei verwendet.

Notiere, wo der Fehler auftritt: Tab, Installationsdialog, Launcher oder bereits installierte App. Ergänze Browser und Betriebssystem. Damit wird aus einer unklaren Meldung ein wiederholbarer Prüffall, und du änderst nicht versehentlich die falsche Ressource.

Öffne das von der Seite verlinkte Manifest

Untersuche den Manifest-Link im HTML und rufe genau seine URL auf. Die Antwort muss das vorgesehene JSON liefern. Eine Anmeldeseite, Weiterleitungsschleife oder allgemeine HTML-Ersatzseite ist kein passendes Manifest. Prüfe die veröffentlichte Antwort statt nur die Datei im Editor.

Der aktuelle Export enthält Web/site.webmanifest, android-chrome-192x192.png und android-chrome-512x512.png. Das Ausgangsmanifest verwendet Icon-Pfade ab der Wurzel des Ursprungs. Liegen deine Bilder in einem Unterordner, passe die Einträge an, statt auf nicht vorhandene Dateien an der Wurzel zu verweisen.

Ein Pfad mit / beginnt auch dann an der Ursprungswurzel, wenn die Anwendung selbst unter einem Unterverzeichnis läuft. Das ist eine wichtige Unterscheidung bei der Bereitstellung.

Folge jedem Bildverweis und prüfe die Datei

Die MDN-Referenz für Manifest-Icons erklärt src, sizes, type und purpose. Relative Pfade werden anhand der Manifest-URL aufgelöst; Pfade mit führendem / anhand der Ursprungswurzel.

Öffne jede deklarierte Bildadresse und kontrolliere die Antwort. Eine Fehlerseite wird durch eine URL mit .png nicht zum Bild. Eine lokal vorhandene Datei kann im Deployment fehlen oder von der Bildrichtlinie der Seite blockiert werden.

Vergleiche deklarierte und tatsächliche Pixelmaße. Nach einer nachträglichen Größenänderung braucht auch der Manifest-Eintrag ein Update. Der Dateiname allein beweist nicht, dass ein Bild 192 oder 512 Pixel hat.

Deklariere nur Zwecke, für die das Motiv vorbereitet ist

Der aktuelle Export erstellt normale Icons. Er erzeugt kein eigenes getestetes maskable Bild. purpose: "maskable" zu einem vorhandenen Icon hinzuzufügen gestaltet dessen Sicherheitsbereich nicht neu.

Wenn du ein maskierbares Motiv brauchst, bereite es dafür vor und prüfe den entsprechenden Beschnitt. Bewahre bei Bedarf auch das normale Icon auf. Der Größenleitfaden zeigt deine Ausgaben; die Browseranforderungen erklären die gewünschte Installationserfahrung.

Manifest und Icons im Browser geprüft

Am 1. Oktober 2026 öffnete Chrome 154 eine eigene lokale Testseite mit exportiertem Manifest und Icons. Das Manifest antwortete mit 200 und application/manifest+json; die relativen Werte start_url und scope führten zur Testwurzel. Beide Icons antworteten mit 200, ihr Bitmap-Decoding bestätigte 192 × 192 und 512 × 512 px. Favicon und Apple Touch Icon wurden getrennt geprüft.

Originale PWA-Icon-Testseite herunterladen

Führe diesen Befehl im entpackten Ordner aus und öffne http://localhost:8892/. Bei Ablage in einem Unterordner müssen die wurzelrelativen Icon-URLs angepasst werden.

python3 -m http.server 8892 --bind localhost

Untersuche den Browser vor dem Löschen von Daten

Öffne die Anwendung- oder Manifest-Werkzeuge des Browsers. Suche nach dem interpretierten Manifest, Icon-Vorschauen und Ladefehlern. Prüfe danach im Netzwerkbereich die Antworten für JSON und Bilder. So lassen sich falsche Adressen von alten Cache-Antworten unterscheiden.

Bei einer entbehrlichen Testinstallation kannst du die Test-App entfernen und nach Prüfung der neuen Ressourcen erneut installieren. Das zusätzliche Löschen von Website-Daten kann lokale App-Daten entfernen. Nutze zunächst gezielte Kontrollen, bevor du Informationen eines echten Nutzers löschst.

Eine bewusst versionierte Bildadresse erleichtert die Zuordnung von Deployment und Cache. Aktualisiere den Manifest-Verweis und notiere die installierte Version. Zufällige URLs für jede Anfrage erschweren diese Zuordnung; stabile versionierte Ressourcen lassen sich besser prüfen und zwischenspeichern.

Teste die Installation als eigenen Ablauf

Der MDN-Leitfaden zur PWA-Installierbarkeit beschreibt weitere Anforderungen. Gültige Icons sind ein Teil davon, machen eine Website aber nicht automatisch auf jedem Browser und Betriebssystem installierbar.

Verwende eine kontrollierte Testseite und den vorgesehenen Browser. Notiere Manifest-Ladevorgang, Bildabrufe und die Darstellung nach der Installation. Eine Desktop-Prüfung darf nicht als Test einer Telefoninstallation beschrieben werden.

Eine tatsächliche Safari-Installation

Am 2. Oktober 2026 wurde dieselbe Testseite im isolierten iPhone-17-Simulator mit iOS 26.5 Safari zum Home-Bildschirm hinzugefügt. Als Web-App öffnen war aktiviert. My App zeigte das originale XY-Motiv und öffnete die Seite in einer eigenen Web-Anwendung ohne Safari-Adressleiste. Dies prüft diesen lokalen Ablauf, keine Chromium-Installation, Offline-Funktion oder physische Geräte.

Nach Apples Safari-Anleitung öffnen Sie die Seite und wählen Mehr → Teilen → Zum Home-Bildschirm. Lassen Sie Als Web-App öffnen aktiviert und tippen Sie auf Hinzufügen. Öffnen Sie danach das Icon und prüfen Sie Motiv und Ziel. Die Testseite enthält weiterhin keinen Service Worker und kein eigenes Maskable-Motiv.

Fragen zu PWA-Manifest-Icons

Warum änderte sich das Tab-Icon, aber nicht das installierte?

Prüfe Favicon und Manifest getrennt, danach den Cache der bestehenden Installation. Das Favicon kann richtig sein, während das Manifest noch eine andere Datei verwendet.

Kann ich die Datei einfach passend umbenennen?

Du kannst Namen angleichen, musst aber auch Format und Maße prüfen. Ein neuer Name konvertiert oder skaliert die Bilddaten nicht.

Sollten alle Browser dasselbe Ergebnis zeigen?

Nein. Installationsoberflächen und unterstützte Icon-Zwecke unterscheiden sich. Teste den vorgesehenen Browser und das Zielgerät.

Hinterlasse einen wiederholbaren PWA-Check

Bestätige die Manifest-URL, öffne ihre Bildverweise und prüfe die tatsächlichen Dateien vor einer neuen Testinstallation. Neue Ressourcen kannst du im PWA-Generator vorbereiten.