PWA-Icons: Was eine installierbare App braucht
Damit ein Browser deine Website als installierbare PWA behandelt, muss ihr Manifest mindestens ein 192x192- und ein 512x512-PNG-Icon listen. Ein Maskable Icon wird dringend empfohlen, damit Android es an den Launcher anpassen kann, und iOS braucht weiterhin ein separates apple-touch-icon, weil es das Manifest für Home-Bildschirm-Icons ignoriert. Fehlt das 192/512-Paar, erscheint die Installationsaufforderung nicht.
Die Installations-Hürde
Chrome und andere Chromium-Browser bieten die Installation einer PWA erst an, wenn das Manifest sowohl ein 192x192- als auch ein 512x512-Icon listet. Dieses Paar ist eine harte Voraussetzung: ohne es gibt es keine Installationsaufforderung, egal was das Manifest sonst enthält.
Das 192 bedient zudem die Home-Bildschirm-Verknüpfung, und das 512 speist den Splashscreen und Displays hoher Dichte. Eine Maskable-Version lässt Android das Icon in die vom Launcher genutzte Form beschneiden, statt es in eine weiße Box zu rahmen.
Icons, die eine PWA braucht
| Icon | Warum es nötig ist |
|---|---|
| 192x192 PNG | Installationsvoraussetzung und Home-Bildschirm-Verknüpfung |
| 512x512 PNG | Splashscreen und Displays hoher Dichte |
| Maskable Icon | Lässt Android das Icon an den Launcher anpassen |
| apple-touch-icon 180x180 | iOS-Home-Bildschirm: das Manifest deckt ihn nicht ab |
FAQ zu PWA-Icons
Welche Icon-Größen braucht eine PWA?
Mindestens ein 192x192- und ein 512x512-PNG im Manifest, idealerweise mit einer Maskable-Variante, plus ein 180x180 apple-touch-icon für iOS-Home-Bildschirme.
Warum lässt sich meine PWA nicht installieren?
Die häufigste Ursache ist ein Manifest, dem das 192x192- oder 512x512-Icon fehlt: beide sind erforderlich, bevor der Browser eine Installationsaufforderung zeigt. Prüfe zuerst das icons-Array des Manifests.
Decken PWA-Icons iOS-Home-Bildschirme ab?
Nein. iOS ignoriert für den Home-Bildschirm die Icons des Manifests und verwendet stattdessen das apple-touch-icon, sodass du diese Datei ebenfalls brauchst.