PWA икони: избегнете отрязани лога и бели квадратчета
Инсталираните уеб приложения използват икони от manifest. Стартерът може да приложи маска на формата.
Подгответе ресурсите
Започнете с PNG 192×192 и 512×512 и проверете платформите. Относителните пътища са спрямо URL на manifest. Максимумът 256px на IcoJet не заменя PNG 512px.
Проектирайте maskable версия
Дръжте важните части в централния кръг с радиус 40% от ширината. Разтеглете фона до ръбовете. Използвайте purpose="maskable" само за проверен дизайн.
Тествайте инсталацията
Проверете manifest и маската в браузъра, после инсталирайте на целевото устройство. Проверете обикновената и maskable версия. Сравнете стара инсталация с нова преди промяна на рисунката.
{
"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"
}
]
}Източници и допълнително четене
MDN — Manifest icons ↗web.dev — Web app manifest ↗