jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas de imágenes y assets

Gratis Generador de manifiesto de app web

Genera un archivo JSON site.webmanifest para sitios estáticos listos para PWA.

Cargando herramienta...

Qué es Generador de manifiesto de app web?

Un manifiesto de aplicación web es un archivo JSON que le indica a los navegadores sobre su aplicación web y cómo debe comportarse cuando se instala en el dispositivo de un usuario. Controla el nombre de la aplicación, los iconos, los colores y el comportamiento de inicio. Para sitios estáticos en GitHub Pages, un manifiesto es el paso clave para hacer que el sitio sea instalable como una Progressive Web App.

Respuesta rápida

Un manifiesto de aplicación web controla cómo se ve su sitio cuando se instala en la pantalla de inicio de un dispositivo. Establece el nombre de la aplicación, los iconos, el color del tema y el comportamiento de inicio para sitios estáticos preparados para PWA.

Last updated: 2026-06-11

Limitaciones

  • El manifiesto solo funciona sobre HTTPS. Los sitios HTTP no pueden usar el manifiesto para solicitudes de instalación.
  • El manifiesto requiere archivos de imagen de icono reales en las rutas especificadas. Los iconos faltantes o con nombres incorrectos hacen que el navegador rechace el manifiesto.
  • El comportamiento de instalación difiere entre Android e iOS. Android usa el manifiesto para solicitudes de instalación, mientras que iOS depende de las meta etiquetas de Apple touch icon y no soporta la instalación PWA completa desde el manifiesto.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Ingrese el nombre de su sitio y un nombre corto opcional que quepa en menos de 12 caracteres.
  2. Seleccione el modo de visualización: standalone elimina el cromo del navegador para una experiencia similar a una aplicación.
  3. Establezca las rutas de los iconos a imágenes PNG en tamaños recomendados como 192x192 y 512x512.
  4. Copie el manifiesto JSON generado y guárdelo como site.webmanifest en la raíz de su sitio.

Para qué puedes usarla

  • Hacer que un sitio de documentación estática sea instalable en pantallas de inicio móviles.
  • Agregar metadatos PWA a un blog para que los lectores recurrentes puedan iniciarlo como una aplicación.
  • Preparar un manifiesto de aplicación web antes de enviar un sitio a un directorio PWA.

Casos de uso

Ejemplos prácticos

Ejemplo

Sitio de herramientas con modo standalone

Un sitio estático que publica herramientas de utilidad basadas en navegador establece display en standalone y theme-color para que coincida con su acento de color coral. Los visitantes en Android pueden agregar el sitio a su pantalla de inicio y abrirlo sin la barra de direcciones.

Ejemplo

Blog con manifiesto mínimo

Un blog personal usa solo name, short name y un icono de 192x192. Deja display como browser y omite orientation. El blog aparece como un acceso directo normal pero aún muestra un icono con marca en la pantalla de inicio.

Errores comunes

  • Establecer rutas de iconos que apuntan a ubicaciones inválidas o archivos faltantes, lo que hace que el navegador rechace el manifiesto.
  • Generar un manifiesto pero olvidar la etiqueta <link rel="manifest" href="/site.webmanifest"> en el head de la página, por lo que el navegador nunca lo lee.
  • Elegir el modo fullscreen o standalone para un sitio con mucho contenido donde los usuarios aún necesitan la barra de direcciones para navegar.

Verificación

  1. Abra Chrome DevTools > Application > Manifest para verificar que el manifiesto se analice correctamente y que los iconos sean accesibles.
  2. Pruebe el sitio sobre HTTPS en un dispositivo Android usando Chrome y confirme que aparezca la solicitud Agregar a Pantalla de Inicio.

FAQ

Preguntas sobre Generador de manifiesto de app web

¿Dónde debería colocar el archivo de manifiesto?

Coloque site.webmanifest en la raíz de su sitio y reférencielo con <link rel="manifest" href="/site.webmanifest"> en el head de la página. El archivo debe servirse con el tipo MIME application/manifest+json.

¿Necesita un sitio estático normal un manifiesto?

Un manifiesto es opcional pero recomendado. Es la única forma de controlar cómo aparece su sitio cuando un usuario lo guarda en su pantalla de inicio. Sin un manifiesto, el navegador usa una captura de pantalla genérica como icono.

¿Qué tamaños de icono se requieren para PWA?

Como mínimo, proporcione iconos PNG de 192x192 y 512x512. El icono de 192x192 se usa para la pantalla de inicio y el de 512x512 es necesario para la insignia PWA instalable en Android.

¿Necesito un service worker para que el manifiesto funcione?

No. El manifiesto de aplicación web funciona independientemente de los service workers. El manifiesto controla cómo aparece su sitio cuando se guarda en una pantalla de inicio (nombre, icono, color de tema, modo de visualización). Un service worker solo es necesario si desea funcionalidad offline completa, sincronización en segundo plano o notificaciones push. Puede agregar un manifiesto a un sitio estático normal sin ningún service worker.

Herramientas relacionadas

Más herramientas de imágenes y assets

Prueba también

Prueba también