UTILS.
100% en el navegador
📱

Generador de manifiesto de aplicación web (PWA)

Genera un manifiesto de aplicación web PWA válido (manifest.json) con iconos, colores de tema y modo de visualización, más la etiqueta link rel=manifest lista para pegar.

— la salida aparece aquí —
— la salida aparece aquí —

Acerca de esta herramienta

El Generador de manifiesto de aplicación web construye un manifest.json válido para una aplicación web progresiva (PWA) a partir de un formulario sencillo, y luego te entrega las etiquetas HTML complementarias para colocar en el <head> de tu página. Todo se ensambla en tu navegador y no se sube nada: puedes copiar el JSON, descargarlo como manifest.json, o copiar las etiquetas link y meta.

Un manifiesto de aplicación web es el archivo JSON que permite instalar un sitio en la pantalla de inicio y abrirlo como una app nativa. Esta herramienta ensambla las claves estándar (name, short_name, description, start_url, scope, display (standalone, fullscreen, minimal-ui o browser), orientation, theme_color, background_color y un array icons) omitiendo cualquier campo que dejes en blanco para que la salida quede limpia. Cada tamaño de icono que marques se convierte en una entrada con su src, sizes y type (derivado de la extensión del archivo), y el purpose opcional te permite marcar los iconos como maskable. El resultado se serializa con JSON.stringify con sangría de dos espacios, así que es legible y conforme al estándar.

Usa el marcador {size} en la ruta del icono (por ejemplo /icons/icon-{size}.png) y se sustituye por cada dimensión, como 192x192 y 512x512. Como mínimo, un manifiesto debería incluir un name, un start_url, un modo display y al menos un icono de 192px y otro de 512px, que son los valores por defecto aquí. Refiérelo desde tu página con la etiqueta generada <link rel="manifest"> y añade el meta theme-color para la interfaz del navegador.

Preguntas frecuentes

¿Qué es un manifiesto de aplicación web?
Es un archivo JSON que describe tu aplicación web progresiva (su nombre, iconos, colores y cómo debe iniciarse) para que los navegadores puedan ofrecer instalarla en la pantalla de inicio y abrirla en una ventana tipo app.
¿Qué campos son obligatorios?
Un manifiesto útil necesita al menos name (o short_name), un start_url, un modo display e iconos de 192x192 y 512x512. Este generador los rellena por defecto; otros campos son opcionales y se omiten cuando se dejan en blanco.
¿Qué significa 'maskable' en los iconos?
Los iconos maskable tienen un relleno de seguridad para que las plataformas puedan recortarlos en círculos, squircles o cuadrados redondeados sin cortar tu logo. Establece el purpose en 'maskable' o 'any maskable' para iconos diseñados con esa zona de seguridad.
¿Cómo instalo el manifiesto en mi sitio?
Guarda el JSON como manifest.json, súbelo a tu sitio, y luego añade las etiquetas generadas <link rel="manifest" href="/manifest.json"> y meta theme-color al <head> de cada página.

Más herramientas