Configuración de Web Manifest - Guía Completa de Configuración PWA (2025)

Aprende a crear un web manifest (manifest.json) para Progressive Web Apps. Configura íconos, colores de tema y configuraciones de visualización para Android y Chrome de escritorio.

¿Quieres que tu sitio web funcione como una aplicación nativa cuando los usuarios lo agreguen a su pantalla de inicio? Necesitas un web manifest: un archivo JSON simple que le dice a los navegadores cómo debe comportarse tu sitio como una Progressive Web App (PWA). Sin él, tu sitio puede ser marcado, pero no aparecerá en el cajón de aplicaciones ni se iniciará en modo independiente.

Este tutorial te muestra cómo crear un archivo manifest.json, configurar íconos de aplicación y configuraciones de visualización, y vincularlo a tu HTML. Toma alrededor de 10 minutos configurarlo, y funciona en Android, Windows y Chrome de escritorio.

¿Qué es un web manifest?

Un web manifest es un archivo JSON (generalmente llamado manifest.json o manifest.webmanifest) que se encuentra en el directorio raíz de tu sitio. Contiene metadatos como el nombre de tu aplicación, el color del tema y las rutas de los íconos. Cuando un usuario agrega tu sitio a su pantalla de inicio en Android o Chrome de escritorio, el navegador lee este archivo para mostrar el ícono correcto e iniciar tu aplicación en modo independiente (sin la interfaz del navegador).

Piensa en él como la "lista de la tienda de aplicaciones" para tu sitio web. Le dice al navegador: "Aquí está el nombre de mi aplicación, aquí está mi ícono, aquí está qué color usar para la pantalla de inicio, y así es como quiero ser mostrado". Sin un manifest, tu sitio será solo un marcador regular: no se sentirá como una aplicación real.

Paso 1: Crea tu archivo manifest.json

Crea un archivo llamado manifest.json (o manifest.webmanifest) en el directorio raíz de tu sitio (la misma carpeta que tu index.html). El archivo debe servirse a través de HTTPS: los navegadores no cargarán manifests desde sitios HTTP por razones de seguridad.

Comienza con esta estructura mínima: {"name": "Mi App", "short_name": "App", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#4285f4", "icons": [...]}. El name aparece debajo del ícono en la pantalla de inicio (hasta ~30 caracteres), mientras que short_name se usa cuando el espacio es limitado (como en el cajón de aplicaciones de Android, ~12 caracteres).

{
  "name": "My Site",
  "short_name": "MySite",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#111827"
}

Paso 2: Agrega íconos de tu paquete de favicon

El array de icons es la parte más importante de tu manifest: enumera diferentes tamaños de tu ícono de aplicación. Necesitas al menos dos tamaños: 192×192 (para la pantalla de inicio) y 512×512 (para la pantalla de inicio). Cada ícono necesita tres propiedades: src (la ruta del archivo), sizes (las dimensiones) y type (el tipo MIME). Ejemplo: {"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"}.

Si generaste tu paquete de favicon con nuestro Convertidor de Imágenes, ya tienes estos archivos PNG. Solo copia los archivos PNG de 192×192 y 512×512 al directorio raíz de tu sitio (o una carpeta /icons/) y refiérelos en el manifest. Asegúrate de que las rutas src coincidan con donde subiste los archivos: si tus íconos están en /icons/, usa "src": "/icons/icon-192.png".

Para íconos adaptativos de Android (íconos con una capa de fondo y primer plano), agrega una segunda entrada de ícono con "purpose": "maskable". Ejemplo: {"src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable"}. Asegúrate de que tu ícono maskable tenga relleno seguro (al menos 10% en todos los lados) para que no se recorte en diferentes dispositivos. Nuestro Convertidor de Imágenes puede generar íconos maskable automáticamente.

Paso 3: Vincula el manifest en tu HTML

Agrega esta línea a tu sección HTML <head>: <link rel="manifest" href="/manifest.json">. El navegador obtendrá el archivo cuando se cargue la página y lo usará cuando el usuario instale tu aplicación. Asegúrate de que la ruta href sea correcta: si tu manifest está en un subdirectorio, usa la ruta completa como href="/assets/manifest.json".

Para sitios HTML estáticos, agrega la etiqueta a tu plantilla de diseño compartida para que esté incluida en cada página. Para Next.js, puedes servir un manifest.json estático desde la carpeta public/ o crear un manifest dinámico usando app/manifest.ts (Next.js 13+). Para WordPress, agrega la etiqueta al archivo header.php de tu tema o usa un plugin como "PWA for WP".

Importante: Tu servidor web debe servir manifest.json con el tipo MIME correcto: application/manifest+json. La mayoría de los servidores hacen esto automáticamente, pero si tu manifest no funciona, verifica la pestaña Network en DevTools: si el encabezado Content-Type es incorrecto (como text/plain), necesitarás configurar tu servidor. Para Apache, agrega esto a .htaccess: AddType application/manifest+json .json. Para Nginx, generalmente está configurado por defecto.

Paso 4: Prueba tu manifest en navegadores

Abre tu sitio en Chrome o Edge (navegadores basados en Chromium), presiona F12 para abrir DevTools y ve a la pestaña Application. Haz clic en "Manifest" en la barra lateral. Verás una vista previa del ícono de tu aplicación, nombre y todas las propiedades del manifest. Cualquier error (como íconos faltantes o JSON inválido) aparecerá aquí. Si no ves la sección Manifest, verifica la Consola para errores: tu manifest podría no estar cargando.

Verifica que el manifest se cargue sin errores, los íconos aparezcan con los tamaños correctos (192×192 y 512×512), y los colores coincidan con tu diseño. Si los íconos faltan o muestran marcadores de posición de imagen rota, las rutas src son incorrectas: verifica que las rutas de archivo en tu manifest coincidan con donde subiste los archivos de ícono.

Prueba la experiencia de instalación: en Android, abre tu sitio en Chrome, toca el menú de tres puntos y elige "Añadir a pantalla de inicio". El ícono de tu aplicación debería aparecer en la pantalla de inicio, y tocarlo debería iniciar tu sitio en modo independiente (sin interfaz del navegador). En Chrome de escritorio, verás un ícono de instalación en la barra de direcciones: haz clic en él para instalar tu aplicación. Si la opción de instalación no aparece, verifica que tu sitio se sirva a través de HTTPS y tenga un manifest válido.

¿Manifest configurado?

Una vez que tu manifest esté funcionando, pruébalo en un dispositivo Android real para asegurarte de que la experiencia de instalación se sienta bien. Si tienes problemas, consulta nuestro tutorial de Solución de Problemas para problemas comunes de manifest. No olvides agregar soporte de Apple Touch Icon para usuarios de iOS: iOS Safari no usa manifest.json.

Agrega soporte de iOS con nuestro tutorial de Apple Touch Icon