¿Qué es Generador de manifest.json?
Manifest.json Generator te ayuda a crear un Web App Manifest completo para aplicaciones web progresivas. Rellena los datos de tu app y obtén un manifest.json listo para usar con todos los campos obligatorios y opcionales correctamente formateados.
Configura nombre, nombre corto, descripción, start_url, scope, modo de visualización (standalone, fullscreen, minimal-ui, browser), orientación, color de tema, color de fondo y tantas entradas de icono como necesites con tamaño, tipo y purpose. La salida cumple la especificación W3C Web App Manifest, así que Chrome, Edge y Safari la reconocen al usar 'Añadir a la pantalla de inicio'.
Cómo usar
- Introduce la información básica de tu app: nombre, nombre corto, descripción, color del tema y color de fondo.
- Configura el modo de visualización (standalone, fullscreen, minimal-ui), la orientación, la URL de inicio y el alcance.
- Añade entradas de iconos con sus tamaños, luego copia o descarga el archivo manifest.json generado para tu proyecto.
Cuándo usar
- Añadir 'Instalar aplicación' a un proyecto web existente para que aparezca en el cajón de apps.
- Personalizar el color de la pantalla de inicio y el icono de una PWA interna para empleados.
- Generar un manifest básico para una plantilla Next.js o Vite que no lo trae por defecto.
Resultado
Estás convirtiendo tu sitio web de recetas en una PWA. Establece el nombre como 'Mis Recetas', el color del tema con el verde de tu marca, el modo de visualización en 'standalone' y genera el manifiesto para colocarlo en la raíz de tu proyecto.
Preguntas frecuentes
- ¿Qué diferencia hay entre standalone y minimal-ui?
- Standalone oculta toda la barra del navegador y la app parece nativa. Minimal-ui deja un par de controles arriba (normalmente atrás y recargar). Fullscreen quita incluso la barra de estado y va bien para juegos.
- ¿Qué tamaños de icono necesito realmente?
- Como mínimo, PNGs de 192×192 y 512×512 — Chrome y Edge los usan para la pantalla de inicio y el splash. Añade 144×144 para tiles antiguos de Windows y un 512×512 con `purpose: maskable` para que Android pueda recortarlo sin perder detalle.
- ¿Por qué necesito name y short_name a la vez?
- `name` aparece en el aviso de instalación y en el cajón de apps; `short_name` se muestra bajo el icono de la pantalla de inicio, donde solo caben unos 12 caracteres. Si lo saltas, el sistema recortará name de forma fea en la mayoría de móviles.
- ¿Dónde se coloca el archivo manifest.json?
- Guárdalo como `manifest.json` (o `manifest.webmanifest`) en la raíz del sitio y enlázalo desde `<head>` con `<link rel='manifest' href='/manifest.json'>`. El navegador lo descargará la primera vez que se cargue la página.
- ¿Con el manifest basta para que mi sitio sea instalable?
- No. El navegador también exige un service worker que maneje el evento `fetch`, HTTPS y al menos un icono de 192×192. El manifest es la capa de metadatos; el service worker prueba que el sitio puede funcionar sin conexión.
Herramientas relacionadas
Generador de datos estructurados
Genera marcado JSON-LD de esquema para SEO
Página web a PDF
Captura una página web como PDF
Generador de política de privacidad
Genera una política de privacidad para tu sitio web
Generador de términos de servicio
Genera un documento de términos de servicio
Generador de Consentimiento de Cookies
Genera código para banners de consentimiento de cookies
Minificador CSS
Minifica código CSS para reducir el tamaño del archivo