Iconos de PWA: qué necesita una app instalable
Para que un navegador trate tu sitio como una PWA instalable, su manifiesto debe listar al menos un icono PNG de 192x192 y otro de 512x512. Se recomienda encarecidamente un icono maskable para que Android pueda darle la forma del lanzador, y iOS todavía necesita un apple-touch-icon aparte porque ignora el manifiesto para los iconos de la pantalla de inicio. Si te falta el par 192/512, el aviso de instalación no aparecerá.
La barrera de instalación
Chrome y otros navegadores basados en Chromium no ofrecerán instalar una PWA hasta que el manifiesto liste un icono de 192x192 y otro de 512x512. Ese par es un requisito estricto: sin él no hay aviso de instalación, sin importar qué más contenga el manifiesto.
El de 192 también sirve al acceso directo de la pantalla de inicio, y el de 512 alimenta la pantalla de bienvenida y las pantallas de alta densidad. Una versión maskable permite que Android recorte el icono a la forma que use el lanzador en vez de enmarcarlo en una caja blanca.
Iconos que necesita una PWA
| Icono | Por qué se necesita |
|---|---|
| 192x192 PNG | Requisito de instalación y acceso directo de la pantalla de inicio |
| 512x512 PNG | Pantalla de bienvenida y pantallas de alta densidad |
| Icono maskable | Permite que Android dé al icono la forma del lanzador |
| apple-touch-icon 180x180 | Pantalla de inicio de iOS: el manifiesto no lo cubre |
Preguntas frecuentes sobre los iconos de PWA
¿Qué tamaños de icono necesita una PWA?
Como mínimo un PNG de 192x192 y otro de 512x512 en el manifiesto, idealmente con una variante maskable, más un apple-touch-icon de 180x180 para las pantallas de inicio de iOS.
¿Por qué no se instala mi PWA?
La causa más habitual es un manifiesto al que le falta el icono de 192x192 o el de 512x512: ambos son obligatorios antes de que el navegador muestre un aviso de instalación. Revisa primero el array icons del manifiesto.
¿Cubren los iconos de PWA las pantallas de inicio de iOS?
No. iOS ignora los iconos del manifiesto para la pantalla de inicio y usa el apple-touch-icon en su lugar, así que también necesitas ese archivo.