¿Qué es manifest.json?
Una guía sencilla sobre los web application manifests y cómo dan vida a las progressive web apps.
Entendiendo el manifest
Un web application manifest, definido en la especificación W3C Web Application Manifest, es un archivo de texto JSON que proporciona información sobre una aplicación web.
El uso más común de un web application manifest es proporcionar la información que el navegador necesita para instalar una progressive web app (PWA) en un dispositivo, como el nombre y el icono de la app.
Un web application manifest contiene un único objeto JSON cuyas claves de nivel superior se llaman members.
Por qué importa manifest.json
| Beneficio | Qué hace |
|---|---|
| Instalación de PWA | El manifest permite que los navegadores propongan a los usuarios instalar tu web app en su dispositivo, haciéndola sentir como una aplicación nativa. |
| Referencias de iconos | El manifest le indica a los navegadores qué archivos de icono usar en distintos contextos: pantallas de inicio, splash screens y launchers de app. |
| Metadatos de la app | Proporciona información esencial como el nombre de tu app, los colores de tema, el modo de visualización y la URL de inicio, para una experiencia consistente. |
El desafío de los iconos
Crear un manifest.json completo requiere generar y referenciar iconos en múltiples tamaños. Cada tamaño cumple un propósito específico en distintas plataformas y contextos.
Para qué sirve cada tamaño
| Tamaño | Propósito |
|---|---|
| 192x192 | Iconos estándar de la pantalla de inicio de Android |
| 512x512 | Splash screens de alta resolución y Android |
| 96x96 | Accesos directos de escritorio y Google TV |
| 32x32 | Pestañas del navegador y marcadores |
| 16x16 | Barra de direcciones y soporte para navegadores heredados |
Los mismos tamaños, a escala real
Cómo ayuda Favicon Tools
Crear manualmente todos los tamaños de icono necesarios y mantener un archivo manifest.json puede ser lento y propenso a errores. Favicon Tools automatiza el proceso.
Cuando usas Favicon Tools para generar tus favicons, escribimos automáticamente un manifest.json completo que referencia todos los tamaños de icono que necesitas:
Qué cubre el manifest generado
| Grupo de iconos | Tamaños | Qué cubre |
|---|---|---|
| Iconos de Android | 192x192, 512x512 | Accesos directos de la pantalla de inicio y splash screens |
| Favicons estándar | 16x16, 32x32, 96x96 | Pestañas del navegador y marcadores |
| Apple touch icons | Todos los tamaños necesarios | Dispositivos iOS |
| Tiles de Windows | Tamaños de tile | Integración con el Menú Inicio de Microsoft |
Ejemplo de manifest.json
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/",
"display": "standalone",
"scope": "/",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}
]
}Este manifest incluye todas las referencias de icono esenciales necesarias para la instalación del PWA y la visualización correcta en distintas plataformas. Favicon Tools lo genera automáticamente junto con todos los archivos de icono referenciados.
Generación con un clic
Sube tu imagen de origen una vez y Favicon Tools genera todos los tamaños de icono que necesitas, más un archivo manifest.json completo, todo en un único paquete descargable.
Sin necesidad de redimensionar imágenes manualmente, crear varios archivos o escribir JSON a mano. Todo listo para colocar en tu proyecto.
Siempre actualizado
Cuando regeneras tus favicons tras un rebrand o una actualización de diseño, el manifest.json se actualiza con las referencias de icono correctas.
Esto evita que tu manifest se desincronice de tus archivos de icono reales, que es lo que produce referencias rotas e iconos que faltan.