PWA-Icons: So machst du deine App installierbar
Die Installationsaufforderung ist keine Design-Entscheidung, sie ist eine Checkliste. Fehlt das 192er- oder das 512er-Icon, verweigert der Browser die Installation stillschweigend. Hier ist der exakte Satz.
Die Installationsaufforderung hängt an den Icons
Ein Browser bietet die Installation einer PWA nur an, wenn das Manifest eine Reihe von Anforderungen erfüllt, und Icons sind eine davon. Konkret muss das icons-Array mindestens ein 192x192- und ein 512x512-PNG enthalten. Fehlt eines, feuert die Aufforderung nie – ohne einen Fehler, den ein Nutzer bemerken würde.
Das 192er ist das Launcher-Icon. Das 512er speist den Splash-Screen und Displays höherer Dichte. Beide müssen echte PNGs in genau diesen Abmessungen sein, nicht ein per CSS gedehntes Bild.
So machst du sie installierbar
- 1
Exportiere die zwei erforderlichen PNGs
Erstelle icon-192.png in 192x192 und icon-512.png in 512x512. Das sind die zwei, auf die die Installationsaufforderung prüft.
- 2
Ergänze eine maskable Version
Exportiere ein 512x512 mit deiner Marke zentriert innerhalb der Safe Zone und mit Padding drumherum, und markiere es dann als purpose: maskable, damit Android es zu einem Kreis, Squircle oder abgerundeten Quadrat zuschneiden kann.
- 3
Liste sie alle im Manifest
Trag jedes Icon ins icons-Array des Manifests ein, mit src, sizes, type und purpose. Das exakte Format siehst du im Code unten.
- 4
Verlinke das Manifest und das apple-touch-icon
Füge <link rel="manifest" href="/manifest.json"> und ein separates <link rel="apple-touch-icon"> in deinen head ein. iOS liest das zweite, nicht das Manifest.
- 5
Prüfe die Aufforderung
Öffne deine Seite in Chrome, prüfe, ob das Installations-Steuerelement erscheint, und stelle sicher, dass das Manifest im Application-Panel der Browser-Dev-Tools keine Fehler hat.
Das icons-Array des Manifests
{
"name": "Your App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a1a1a",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Das 192er und das 512er mit purpose any erfüllen die Installationsanforderung. Der maskable Eintrag lässt Android das Icon zuschneiden, ohne deine Marke abzuschneiden.
Warum maskable separat ist
Android-Launcher schneiden Icons auf die Form zu, die das Geräte-Theme verwendet. Ein normales Icon, das das ganze Quadrat füllt, verliert seine Ecken. Ein maskable Icon hat deine Marke in einer Safe Zone mit Padding zentriert, sodass der Launcher die Ränder zuschneiden kann, ohne den wichtigen Teil anzutasten.
Du behältst trotzdem ein purpose any Icon neben dem maskable. Oberflächen, die nicht maskieren (der Tab, der Task-Switcher), nutzen die any-Version, damit sie nicht mit zusätzlichem Padding dasteht.
Häufig gestellte Fragen
Warum erscheint die Installationsaufforderung meiner PWA nicht?
Die häufigste icon-bezogene Ursache ist ein fehlendes 192x192- oder 512x512-PNG im icons-Array des Manifests. Beide sind erforderlich. Prüfe außerdem, ob das Manifest verlinkt und ausgeliefert wird und die App über HTTPS mit einem Service Worker läuft.
Welche Icon-Größen braucht eine PWA?
Ein 192x192- und ein 512x512-PNG im Manifest sind für die Installationsaufforderung erforderlich. Ergänze eine 512x512 maskable Version für Android und ein 180x180 apple-touch-icon für iOS.
Brauche ich ein maskable Icon?
Für Android ja. Ohne eines schneidet der Launcher dein randfüllendes Icon zu und kappt die Ecken. Ein maskable Icon hält deine Marke in einer Safe Zone, damit sie jede Form übersteht.
Legt das Manifest das iOS-Homescreen-Icon fest?
Nein. iOS ignoriert die Manifest-Icons bei "Zum Home-Bildschirm hinzufügen". Es nutzt das apple-touch-icon-Link-Tag, also brauchst du eines in deinem head, selbst wenn das Manifest vollständig ist.