PWA-iconen: voorkom afgesneden logo's en kleine witte vakjes
Geïnstalleerde webapps gebruiken manifesticonen. Het startscherm kan daar een vormmasker op toepassen.
Maak app-afbeeldingen
Begin met PNG van 192×192 en 512×512 en controleer de platforms. Relatieve paden verwijzen vanaf de manifest-URL. IcoJets maximum van 256px vervangt geen PNG van 512px.
Ontwerp een maskable-versie
Houd belangrijke delen binnen de middencirkel met een straal van 40% van de breedte. Trek de achtergrond door tot de rand. Gebruik purpose="maskable" alleen na controle van dit ontwerp.
Test de installatie
Inspecteer manifest en masker in de browser en installeer op het doelapparaat. Controleer gewone en maskable-varianten. Vergelijk een oude installatie met een nieuwe voordat u opnieuw tekent.
{
"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"
}
]
}Bronnen en verder lezen
MDN — Manifest icons ↗web.dev — Web app manifest ↗