PWA-ikoner: undgå afskårne logoer og små hvide felter
Installerede webapps bruger manifestikoner. Startskærmen kan lægge en formmaske over billedet.
Forbered appgrafik
Start med PNG på 192×192 og 512×512, og kontrollér platformene. Relative stier tager udgangspunkt i manifestets URL. IcoJets højst 256px erstatter ikke en 512px-PNG.
Design en maskable-version
Hold vigtige dele i midtercirklen med radius på 40% af bredden. Før baggrunden ud til kanten. Brug kun purpose="maskable" efter kontrol af denne udformning.
Test installationen
Se manifest og maskeforhåndsvisning i browseren, og installér på målenheden. Kontrollér almindelig og maskérbar variant. Sammenlign gammel installation med en ny, før grafikken ændres.
{
"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 læsning
MDN — Manifest icons ↗web.dev — Web app manifest ↗