Beneficios del Manifest.json
Apple, Google y Microsoft siguen apostando por el Web App Manifest. Rellénalo una vez y tus iconos, tu theme color y tu analytics encajan en todas partes.
Lo que te da el manifest
| Beneficio | Qué obtienes |
|---|---|
| Prompts de instalación que se sienten nativos | Chrome, Edge y Android muestran banners de «Instalar app» solo si tu manifest declara icons, name, start_url y el modo de display. |
| Splash screens listas para offline | El manifest te da control sobre las imágenes de splash, los colores de fondo y los iconos maskable para que el lanzamiento offline parezca intencionado. |
| Metadatos consistentes en todas partes | Cuando los motores de búsqueda o las plataformas sociales inspeccionan tu manifest, toman el mismo título, theme color e iconos que tú curaste. |
Anatomía de un manifest moderno
Estos son los campos que Lighthouse y Android inspeccionan de verdad antes de mostrar tu icono.
| Campo | Por qué existe | Consejo pro |
|---|---|---|
| name & short_name | Controla el banner de instalación y el texto de la etiqueta en el launcher. | Mantén short_name con menos de 12 caracteres para que no se trunque en las pantallas de inicio de Android. |
| icons[] | Define qué PNG alimentan las superficies de instalación, las splash screens y los logos maskable. | Incluye los tamaños 192, 256, 384 y 512 con purpose: "any maskable" para la mejor cobertura. |
| start_url | Determina qué ruta se abre cuando el usuario lanza el app desde el dock. | Añade ?source=pwa y léelo en el servidor para personalizar la analytics. |
| display | Alterna entre las experiencias standalone, fullscreen o minimal-ui. | Usa standalone más theme_color para que combine con el chrome de tu marca. |
Dónde empiezan los iconos del manifest
JSON inicial
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/?source=pwa",
"display": "standalone",
"scope": "/",
"background_color": "#0f172a",
"theme_color": "#312e81",
"icons": [
{ "src": "/android-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/android-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}Coloca este archivo en /public/manifest.json y el generador de Favicon Tools mantendrá el array de iconos actualizado cada vez que exportes un nuevo conjunto.
Checklist de release
Manten esto pegado en tu panel de deploy para que el manifest siga siendo preciso después de un rebranding.
- 1
Sirve y enlaza el manifest
Sirve el manifest en /manifest.json y exponlo mediante <link rel="manifest" href="/manifest.json">.
- 2
Comprueba que cada icono se resuelve
Asegúrate de que cada icono referenciado exista realmente en tu CDN y coincida con el tamaño declarado.
- 3
Alinea el chrome del navegador
Añade las meta tags theme-color y background_color para alinear el chrome del navegador con la paleta de tu icono.
- 4
Haz lint y auditoría antes del release
Ejecuta npx next lint más la auditoría de PWA de Lighthouse antes de cada release para detectar campos ausentes en el manifest.
- 5
Define el scope del app instalado
Apunta el scope del manifest a la URL principal de tu app para que los atajos instalables permanezcan dentro de tu dominio.
Automatiza las actualizaciones
Guarda la plantilla de tu manifest junto a la configuración de los iconos. Cuando el CI construya un nuevo conjunto de favicons, actualiza el JSON y haz el redeploy a la vez.
Prueba como un app nativo
Instala tu sitio en iOS, en Android y en Chrome de escritorio. Verifica que la splash screen, la máscara del icono y el theme color coincidan con los valores del manifest.
A los equipos de QA les gusta un checklist sencillo: instalar, lanzar offline, inspeccionar la calidad del icono, verificar el parámetro de analytics.