PWA-ikoner: undvik beskurna logotyper och små vita rutor
Installerade webbappar använder manifestikoner. Startprogrammet kan lägga en formmask på bilden.
Förbered appbilder
Börja med PNG 192×192 och 512×512 och kontrollera plattformarna. Relativa sökvägar utgår från manifestets URL. IcoJets högst 256px ersätter inte PNG på 512px.
Rita en maskable-version
Placera viktiga delar i mittcirkeln med radie 40% av bredden. Dra bakgrunden till kanterna. Använd purpose="maskable" först när utformningen har kontrollerats.
Testa installationen
Granska manifest och maskförhandsvisning i webbläsaren och installera på målenheten. Testa vanlig och maskbar version. Jämför en gammal installation med en ny innan bilden ändras.
{
"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"
}
]
}Källor och vidare läsning
MDN — Manifest icons ↗web.dev — Web app manifest ↗