Icones PWA: evita retalls i petits quadres blancs
Les aplicacions web instal·lades utilitzen icones del manifest. El llançador pot aplicar una màscara de forma.
Prepara recursos
Comença amb PNG de 192×192 i 512×512 i comprova les plataformes. Les rutes relatives depenen de l'URL del manifest. Els 256px màxims d'IcoJet no substitueixen un PNG de 512px.
Dissenya la versió maskable
Mantén l'essencial al cercle central amb radi del 40% de l'amplada. Estén el fons fins a les vores. Usa purpose="maskable" només després de validar el disseny.
Prova la instal·lació
Inspecciona manifest i màscara al navegador i instal·la al dispositiu objectiu. Comprova variants normal i adaptable. Compara una instal·lació antiga amb una de nova abans de canviar el dibuix.
{
"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"
}
]
}Fonts i lectures
MDN — Manifest icons ↗web.dev — Web app manifest ↗