Iconos PWA: evita recortes y pequeños cuadros blancos
Las aplicaciones web instaladas usan iconos del manifiesto. El lanzador puede aplicarles una máscara de forma.
Prepara recursos específicos
Empieza con PNG de 192×192 y 512×512 y verifica cada plataforma. Las rutas relativas dependen de la URL del manifiesto. Los 256px máximos de IcoJet no sustituyen un PNG de 512px.
Diseña una versión adaptable
Mantén lo esencial en el círculo central de radio igual al 40% del ancho. Extiende el fondo hasta los bordes. Usa purpose="maskable" solo tras comprobar ese diseño.
Prueba la instalación
Inspecciona manifiesto y máscara en el navegador; después instala en el dispositivo objetivo. Comprueba variantes normales y adaptables. Compara una instalación antigua con otra nueva antes de modificar el dibujo.
{
"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"
}
]
}Fuentes y lecturas
MDN — Manifest icons ↗web.dev — Web app manifest ↗