Iconos de PWA: Haz Que Tu App Sea Instalable
El prompt de instalación no es una decisión de diseño, es una checklist. Olvida el icono de 192 o el de 512 y el navegador se niega en silencio a ofrecer la instalación. Aquí está el conjunto exacto.
El prompt de instalación depende de los iconos
Un navegador solo ofrece instalar una PWA cuando el manifest cumple un conjunto de requisitos, y los iconos son uno de ellos. En concreto, el array de icons debe incluir al menos un PNG 192x192 y uno 512x512. Olvida cualquiera y el prompt nunca se dispara, sin ningún error que un usuario note.
El 192 es el icono del launcher. El 512 alimenta la pantalla de splash y las pantallas de mayor densidad. Ambos deben ser PNG reales en esas dimensiones exactas, no una imagen estirada por CSS.
Hazla instalable
- 1
Exporta los dos PNG obligatorios
Crea icon-192.png en 192x192 e icon-512.png en 512x512. Estos son los dos que comprueba el prompt de instalación.
- 2
Añade una versión maskable
Exporta un 512x512 con tu marca centrada dentro de la zona segura y con padding alrededor, luego márcalo como purpose: maskable para que Android pueda recortarlo en círculo, squircle o cuadrado redondeado.
- 3
Lístalos todos en el manifest
Pon cada icono en el array icons del manifest con su src, sizes, type y purpose. Consulta el código de abajo para el formato exacto.
- 4
Vincula el manifest y el apple-touch-icon
Añade <link rel="manifest" href="/manifest.json"> y un <link rel="apple-touch-icon"> separado en tu head. iOS lee el segundo, no el manifest.
- 5
Verifica el prompt
Abre tu sitio en Chrome, comprueba que aparece el control de instalación, y confirma que el manifest no tiene errores en el panel application de las dev tools del navegador.
El array de icons del manifest
{
"name": "Your App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a1a1a",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}El 192 y el 512 con purpose any satisfacen el requisito de instalación. La entrada maskable permite que Android recorte el icono sin cortar tu marca.
Por qué el maskable es separado
Los launchers de Android recortan iconos a cualquier forma que use el tema del dispositivo. Un icono normal que llena todo el cuadrado tiene sus esquinas cortadas. Un icono maskable tiene tu marca centrada en una zona segura con padding, para que el launcher pueda recortar los bordes sin tocar la parte importante.
Aún mantienes un icono purpose any junto al maskable. Las superficies que no recortan (la pestaña, el conmutador de tareas) usan la versión any para que no quede con padding extra.
Preguntas frecuentes
¿Por qué no aparece el prompt de instalación de mi PWA?
La causa más común ligada a iconos es la falta de un PNG 192x192 o 512x512 en el array icons del manifest. Ambos son obligatorios. Comprueba también que el manifest esté vinculado y servido, y que la app esté en HTTPS con un service worker.
¿Qué tamaños de icono necesita una PWA?
Un PNG 192x192 y uno 512x512 en el manifest son obligatorios para el prompt de instalación. Añade una versión maskable de 512x512 para Android y un apple-touch-icon de 180x180 para iOS.
¿Necesito un icono maskable?
Para Android, sí. Sin uno, el launcher recorta tu icono full-bleed y corta las esquinas. Un icono maskable mantiene tu marca dentro de una zona segura para que sobreviva a cualquier forma.
¿El manifest define el icono de la pantalla de inicio de iOS?
No. iOS ignora los icons del manifest en Añadir a la Pantalla de Inicio. Usa el link tag apple-touch-icon, así que necesitas uno en tu head aunque el manifest esté completo.