Ikony PWA: predíďte orezaniu a malým bielym políčkam
Nainštalované webové aplikácie používajú ikony manifestu. Spúšťač môže použiť tvarovú masku.
Pripravte podklady
Začnite PNG 192×192 a 512×512 a overte platformy. Relatívne cesty vychádzajú z URL manifestu. Maximum 256px v IcoJet nenahradí PNG 512px.
Navrhnite maskovateľnú verziu
Dôležité časti držte v stredovom kruhu s polomerom 40% šírky. Pozadie pretiahnite k okrajom. purpose="maskable" použite iba po overení návrhu.
Otestujte inštaláciu
Prezrite manifest a náhľad masky v prehliadači, potom inštalujte na cieľové zariadenie. Overte bežnú aj maskovateľnú verziu. Starú inštaláciu porovnajte s novou pred zmenou 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 ďalšie čítanie
MDN — Manifest icons ↗web.dev — Web app manifest ↗