PWA-Icons: abgeschnittene Logos und kleine weiße Flächen vermeiden
Installierte Web-Apps benötigen Manifest-Icons. Eine vom Launcher angewendete Formmaske kann das Ergebnis verändern.
Eigene App-Grafiken vorbereiten
192×192 und 512×512 PNG sind ein Ausgangspunkt, keine universelle Vollständigkeitsgarantie. Relative Bildpfade beziehen sich auf die Manifest-URL. IcoJets maximal 256px ersetzen keine 512px-PNG.
Eine maskierbare Variante gestalten
Wichtige Elemente gehören in den mittigen Kreis mit einem Radius von 40% der Bildbreite. Den Hintergrund bis zum Rand ziehen. purpose="maskable" nur für entsprechend gestaltete und geprüfte Bilder setzen.
Die Installation prüfen
Manifest und Maskenvorschau im Browser prüfen, dann auf dem Zielgerät installieren. Normale und maskierbare Varianten vergleichen. Bei einem alten installierten Symbol zunächst eine frische Testinstallation prüfen.
{
"icons": [
{
"src": "/icons/app-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/app-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/app-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Quellen und weiterführende Informationen
MDN — Manifest icons ↗web.dev — Web app manifest ↗