Guía del web app manifest: un manifest.json de verdad, campo por campo
El web app manifest es un pequeño archivo JSON que le dice al SO cómo instalar tu sitio: su nombre, sus iconos y sus colores. Aquí tienes uno de verdad, campo por campo.
Para qué sirve el manifest
El manifest es lo que convierte un sitio web en algo que el SO puede instalar. Cuando un usuario añade tu sitio a una pantalla de inicio, el navegador lee el manifest para decidir el icono, el nombre debajo de él, la pantalla de bienvenida y si la app se abre con o sin la interfaz del navegador.
Es JSON puro. Necesitas un archivo, enlazado desde todas las páginas, más los PNG de icono a los que apunta. Cada campo de abajo corresponde a algo que el usuario ve.
Los campos que importan
| Campo | Qué controla |
|---|---|
| name | El nombre completo de la app, mostrado en el aviso de instalación y en la pantalla de bienvenida |
| short_name | El nombre bajo el icono de la pantalla de inicio, donde el espacio es escaso |
| icons | El conjunto de iconos. Incluye PNG de 192 y 512, más uno marcado como maskable para las formas de Android |
| theme_color | El color de la interfaz del SO alrededor de la app, como la barra de estado |
| background_color | El fondo de la pantalla de bienvenida que se muestra mientras la app carga |
| display | Cómo se abre la app. standalone oculta la interfaz del navegador para que parezca nativa |
| start_url | La página que abre la app cuando se lanza desde la pantalla de inicio |
Un manifest.json completo
{
"name": "Acme Dashboard",
"short_name": "Acme",
"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"
}
],
"theme_color": "#0b0b0f",
"background_color": "#0b0b0f",
"display": "standalone",
"start_url": "/"
}Dos iconos estándar y uno maskable, para que Android pueda recortar en cualquier forma de launcher sin cortar tu logo.
Conéctalo a tus páginas
<link rel="manifest" href="/manifest.json">Pon esto en el <head> de todas las páginas. Sin la etiqueta link, el archivo existe pero nada lo lee.
Preguntas frecuentes
¿Qué es un web app manifest?
Un pequeño archivo JSON que le dice al navegador y al SO cómo instalar tu sitio: su nombre, iconos, colores y cómo debe abrirse. Es lo que hace que una página se pueda instalar en una pantalla de inicio.
¿Cuál es la diferencia entre theme_color y background_color?
theme_color tiñe la interfaz del SO alrededor de la app, como la barra de estado. background_color rellena la pantalla de bienvenida que se muestra mientras la app carga. Suelen tener el mismo valor, pero controlan superficies distintas.
¿Dónde coloco el manifest.json?
Sírvelo desde una ruta estable como la raíz de tu sitio, luego referéncialo con <link rel="manifest" href="/manifest.json">. Los iconos que lista deben resolverse desde las rutas de los campos src.
¿Necesito un manifest para un sitio normal?
Solo si quieres avisos de instalación e iconos de pantalla de inicio. Un sitio informativo sencillo funciona bien sin uno, pero cualquier sitio que los usuarios puedan guardar en un móvil se beneficia de él.