Ikony PWA: předejděte ořezu a malým bílým políčkům
Instalované webové aplikace používají ikony manifestu. Spouštěč může aplikovat tvarovou masku.
Připravte podklady
Začněte PNG 192×192 a 512×512, pak ověřte platformy. Relativní cesty vycházejí z URL manifestu. Maximum 256px v IcoJet nenahradí PNG 512px.
Navrhněte maskovatelnou verzi
Důležité části držte ve středovém kruhu s poloměrem 40% šířky. Pozadí protáhněte k okrajům. purpose="maskable" použijte pouze u ověřeného návrhu.
Otestujte instalaci
Prohlédněte manifest a náhled masky v prohlížeči, pak instalujte na cílové zařízení. Ověřte běžnou i maskovatelnou verzi. Starou instalaci porovnejte s novou před změnou kresby.
{
"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"
}
]
}Zdroje a další čtení
MDN — Manifest icons ↗web.dev — Web app manifest ↗