Iconos del manifiesto: el array icons de un manifiesto de aplicación web
Un icono de manifiesto es una entrada del array icons de un manifiesto de aplicación web, el archivo JSON que describe tu sitio cuando está instalado. Cada entrada indica un src, una cadena sizes, normalmente un type y, opcionalmente, un purpose, y el navegador elige la coincidencia más cercana para la pantalla de inicio, el lanzador de apps, el conmutador de tareas y la pantalla de bienvenida. Como mínimo declara un PNG de 192x192 y otro de 512x512.
Para qué sirve el array
El manifiesto de aplicación web es un archivo JSON enlazado desde tu head que le indica al navegador cómo debe comportarse tu sitio cuando está instalado: su nombre, su URL de inicio, su modo de visualización, su color de tema y sus iconos. Los iconos del manifiesto son los que se usan fuera del chrome del navegador: el lanzador, el conmutador de apps, el aviso de instalación, la pantalla de bienvenida.
A diferencia de las etiquetas link de favicon, el array es una lista de candidatos en lugar de un conjunto de instrucciones. Describes qué es cada archivo, y el navegador elige según cada superficie. Eso significa que declarar más entradas es barato: no se descarga nada hasta que una superficie lo necesita.
Un manifiesto mínimo
{
"name": "Example App",
"short_name": "Example",
"start_url": "/",
"display": "standalone",
"theme_color": "#0b0b0b",
"background_color": "#ffffff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Enlázalo desde el head con <link rel="manifest" href="/manifest.json">. El archivo también puede llamarse manifest.webmanifest; lo que importa es la etiqueta link.
Campos de una entrada de icono
| Campo | Qué hace |
|---|---|
| src | Ruta a la imagen, resuelta relativa a la URL del manifiesto. Obligatorio. |
| sizes | Dimensiones como "ANCHOxALTO", o varias separadas por espacios para un archivo multitamaño. |
| type | Tipo MIME, p. ej. image/png. Permite al navegador saltarse formatos que no puede decodificar. |
| purpose | "any" (por defecto), "maskable" para iconos seguros de recortar, o "monochrome". |
Preguntas frecuentes sobre iconos del manifiesto
¿Por qué 192 y 512 concretamente?
192x192 es el tamaño que Android usa para el icono de la pantalla de inicio en las densidades de pantalla habituales, y 512x512 es el tamaño usado para la pantalla de bienvenida y el aviso de instalación. Juntos satisfacen las comprobaciones de instalabilidad de los navegadores basados en Chromium.
¿Los iconos del manifiesto reemplazan a mi favicon?
No. Solo cubren las superficies de app instalada. Las pestañas, los marcadores y el historial del navegador siguen viniendo de tus etiquetas link rel="icon" y de /favicon.ico, así que incluye ambos.
¿iOS lee los iconos del manifiesto?
Safari lee el manifiesto para cosas como el nombre y el modo de visualización, pero el icono de la pantalla de inicio viene de la etiqueta link apple-touch-icon. Declara ambos si quieres que el icono sea correcto en iOS y Android.