PWA ikone: izbjegnite odrezani logotip i bijele kvadratiće
Instalirane web-aplikacije koriste ikone manifesta. Pokretač može primijeniti masku oblika.
Pripremite resurse
Počnite s PNG 192×192 i 512×512 te provjerite platforme. Relativne putanje polaze od URL-a manifesta. IcoJetov maksimum 256px ne zamjenjuje PNG od 512px.
Oblikujte maskable verziju
Važne dijelove držite u središnjem krugu polumjera 40% širine. Pozadinu produžite do rubova. purpose="maskable" koristite samo nakon provjere dizajna.
Testirajte instalaciju
Provjerite manifest i masku u pregledniku, zatim instalirajte na ciljani uređaj. Pregledajte običnu i maskable verziju. Staru instalaciju usporedite s novom prije promjene crteža.
{
"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"
}
]
}Izvori i dodatno čitanje
MDN — Manifest icons ↗web.dev — Web app manifest ↗