📱 Generador de Web App Manifest
Crea manifest.json para tu PWA desde un formulario: name, start_url, display, theme_color, tabla de icons en varios tamanos, shortcuts, share_target y protocol_handlers. Tambien la etiqueta link HTML.
🔒 Sobre la privacidad
- ・El JSON se genera completamente en tu navegador
- ・Tus datos nunca se envian al servidor
- ・Sin registros, sin base de datos
- ・Sin registro, sin inicio de sesión, sin pago
Informacion basica
Iconos (tamano y src)
Los tamanos marcados se incluyen en el array icons.
Atajos de app (hasta 4)
📖 Dónde se suele tropezar
Construye desde un formulario el manifest.json que necesita una PWA. Ademas de name, start_url, display y theme_color, cubre varios tamanos de icons, shortcuts, share_target y protocol_handlers, y emite tambien la etiqueta link de HTML. Todo se ejecuta en el navegador. Un manifiesto por si solo, sin embargo, no hace instalable una aplicacion: para que se considere instalable hacen falta HTTPS, un service worker, los campos obligatorios e iconos en los tamanos prescritos. Cuando el boton de instalar no aparece pese a haber un manifiesto, la causa suele estar fuera del manifiesto.
| Caso | Qué ocurre | Qué hacer |
|---|---|---|
| La instalabilidad no se logra solo con el manifiesto | Para que un navegador ofrezca la instalacion, deben cumplirse todas estas condiciones: HTTPS (o localhost), un service worker registrado con manejador de fetch, un name o short_name, un start_url, un display igual a standalone, fullscreen o minimal-ui, e iconos de 192px y 512px. Si falta una, no hay error: el boton sencillamente no aparece, y que no te digan que falta es lo mas dificil. Ademas, Safari en iOS ignora buena parte del manifiesto: el icono al anadir a la pantalla de inicio sale de apple-touch-icon y el modo de visualizacion lo determina apple-mobile-web-app-capable. |
No adivines: abre Application > Manifest en las herramientas de desarrollo de Chrome. Enumera en frases claras las condiciones incumplidas: mirar o no esa pantalla cambia en horas el tiempo hasta la solucion. La auditoria PWA de Lighthouse ejecuta las mismas comprobaciones de forma automatica. Que el service worker este registrado no basta: tiene que existir de verdad un manejador del evento fetch, asi que un sw.js vacio no cumple el requisito. Si tambien apuntas a iOS, anade a tu HTML, aparte del manifiesto, apple-touch-icon de 180 por 180 y apple-mobile-web-app-title: pulir solo el manifiesto no cambia nada en iOS. |
Como se resuelven start_url y scope |
Ambos se resuelven respecto a la ubicacion del archivo de manifiesto, no a la raiz del sitio. Con el manifiesto en /static/manifest.json, escribir "start_url": "index.html" hace que la URL de arranque sea /static/index.html: y si esa no existe, la aplicacion se instala bien y luego abre un 404. scope llega mas lejos: define el rango de URL que permanecen dentro de la ventana de la aplicacion, y seguir un enlace fuera de el te expulsa al navegador. Su valor por defecto, si se omite, es tambien la ubicacion del manifiesto, de modo que dejarlo en /static/ sin escribir nada deja todo tu sitio fuera del ambito. Y si start_url cae fuera de scope, la aplicacion no se considera instalable siquiera. |
Escribe ambos como rutas absolutas con barra inicial: "start_url": "/" y "scope": "/". Solo con eso desaparecen todos los problemas de resolucion relativa. Si solo una parte del sitio es la PWA, indica el ambito de forma explicita como "scope": "/app/" y confirma que start_url queda dentro. Anadir una consulta a start_url permite que tu analitica distinga los arranques desde la aplicacion instalada, por ejemplo "/?source=pwa". El manifiesto puede vivir en cualquier sitio, pero el href de <link rel="manifest"> debe coincidir con la ruta real: si el manifiesto devuelve un 404, el navegador simplemente lo ignora en silencio y no muestra nada. |
| El icono sale recortado en Android (maskable) | Los lanzadores de Android enmascaran los iconos en un circulo o un cuadrado redondeado. Por eso, si solo aportas iconos con "purpose": "any", se te recortan las esquinas: si tu logotipo llena el marco cuadrado, los caracteres de los bordes desaparecen. La declaracion que lo evita es "purpose": "maskable", y un icono maskable se disena tomando aproximadamente el 40 por ciento central como zona segura, dando por hecho que todo lo de fuera puede recortarse. Pero aportar solo un icono maskable es igual de equivocado: en entornos que no enmascaran, como la barra de tareas de escritorio o una pantalla de bienvenida, se ve como un logotipo pequeno rodeado de mucho margen. Cualquiera de los dos por si solo se rompe en algun sitio: esa es la esencia de la especificacion. |
Registra ambos tipos como entradas separadas. Aunque sean el mismo 512 por 512, enumera la version a sangre como "purpose": "any" y una version con margen como "purpose": "maskable": tambien puedes poner "any maskable" en una sola entrada, pero entonces el diseno debe satisfacer ambos requisitos a la vez. Comprueba el resultado en Chrome DevTools, en Application > Manifest: muestra una vista previa con la mascara aplicada, de modo que ves el recorte al momento. Aporta al menos los tamanos 192 y 512 y usa PNG en lugar de SVG: el soporte de SVG varia segun el entorno. |
El manifiesto se cachea. Cambiarlo no llega de inmediato a los dispositivos donde la aplicacion ya esta instalada: por eso, normalmente, un icono o un nombre sustituidos siguen mostrando el anterior. Cuando se refresca depende del navegador, asi que durante el desarrollo fuerza una actualizacion desde Application > Manifest en DevTools y confirmalo desinstalando y reinstalando. Y sirve manifest.json con Content-Type: application/manifest+json: algunos navegadores no lo cargan si el servidor devuelve text/plain. Una nota de diseno: display: "standalone" elimina la interfaz del navegador y con ella el boton de atras y la barra de direcciones; sin una via de vuelta dentro de tu aplicacion, los usuarios llegan a un callejon sin salida. Un enlace a un sitio externo queda fuera de scope y abre el navegador, pero nada garantiza que puedan volver. Por ultimo, convertir algo en PWA no hace que se instale: lo que cuenta es si ofreces un camino hacia la instalacion y un beneficio que la justifique: uso sin conexion, notificaciones, arranque rapido.
📖 Cómo usar
-
1
Rellena la informacion basicaIntroduce name, short_name, start_url, display y theme_color.
-
2
Configura iconos y atajosMarca los tamanos, define prefijo y extension, anade hasta 4 atajos.
-
3
Genera y despliegaPulsa Generar, guarda manifest.json y pega el snippet en el head.
❓ Preguntas frecuentes
¿Requisitos minimos para ser instalable?
¿Necesito icono maskable?
No se aplican los cambios del manifest
🔗 Herramientas relacionadas
🐛 ¿Encontró un problema con esta herramienta?
Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.
¡Gracias por tu reporte!
Tu reporte llegó al operador y se usará para mejorar.