PWA-ikoner: unngå avkuttede logoer og små hvite ruter
Installerte nettapper bruker manifestikoner. Startskjermen kan legge en formmaske over bildet.
Forbered appbilder
Start med PNG 192×192 og 512×512 og kontroller plattformene. Relative stier regnes fra manifestets URL. IcoJets maksimale 256px erstatter ikke en PNG på 512px.
Lag en maskable-variant
Hold viktige deler innenfor midtsirkelen med radius 40% av bredden. La bakgrunnen gå til kanten. Bruk purpose="maskable" bare etter at utformingen er kontrollert.
Test installasjonen
Undersøk manifest og maskeforhåndsvisning i nettleseren, og installer på målenheten. Sjekk normal og maskerbar variant. Sammenlign gammel installasjon med en ny før du endrer tegningen.
{
"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"
}
]
}Kilder og videre lesning
MDN — Manifest icons ↗web.dev — Web app manifest ↗