Icone PWA: evitare loghi tagliati e piccoli riquadri bianchi
Le applicazioni web installate usano icone del manifest. Il launcher può applicare una maschera di forma.
Preparare le risorse
Parti da PNG 192×192 e 512×512, poi controlla ogni piattaforma. I percorsi relativi dipendono dall'URL del manifest. I 256px massimi di IcoJet non sostituiscono un PNG 512px.
Progettare la versione maskable
Mantieni gli elementi essenziali nel cerchio centrale con raggio pari al 40% della larghezza. Estendi lo sfondo ai bordi. Usa purpose="maskable" solo dopo avere verificato il disegno.
Provare l'installazione
Controlla manifest e anteprima della maschera nel browser, poi installa sul dispositivo previsto. Verifica entrambe le varianti e confronta una vecchia installazione con una nuova prima di ridisegnare.
{
"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"
}
]
}Fonti e approfondimenti
MDN — Manifest icons ↗web.dev — Web app manifest ↗