Generador de Web App Manifest
Rellena los datos de tu app, sube una imagen cuadrada y obtén un web app manifest válido y todos los tamaños de icono que necesita una Progressive Web App, incluidos los iconos maskable y Apple touch. Previsualiza el icono de la pantalla de inicio y la pantalla de bienvenida, y descárgalo todo en un ZIP.
Última actualización:
Cómo usar Generador de Web App Manifest
- Escribe los datos de tu app: nombre, nombre corto, descripción, URL de inicio y modo de visualización.
- Elige los colores de tema y de fondo que se usan en la barra de herramientas y en la pantalla de bienvenida.
- Sube una imagen cuadrada (de 512×512 px o más; PNG o SVG funcionan mejor). Si no subes ninguna, se genera un icono con una letra.
- Ajusta el margen maskable hasta que el logotipo quede dentro del círculo de la vista previa.
- Descarga el ZIP, sube sus archivos a tu sitio y pega las etiquetas HTML en el head de tu página.
Ejemplo de manifest explicado
| Miembro | Qué hace |
|---|---|
name / short_name | Nombre completo para los diálogos de instalación y las pantallas de bienvenida; nombre corto (unos 12 caracteres) debajo del icono de la pantalla de inicio. |
start_url | La página que se abre al iniciar la app. Añade un parámetro como /?source=pwa para medir los inicios de la app. |
scope | Las URL que pertenecen a la app. Las páginas fuera de ese ámbito se abren con los controles del navegador. |
id | Una identidad estable; mantiene la misma app instalada aunque start_url cambie más adelante. |
display | standalone, fullscreen, minimal-ui o browser. |
theme_color | Color de la barra de herramientas y del selector de tareas. Haz que coincida con la etiqueta <meta name="theme-color">. |
background_color | Color de la pantalla de bienvenida que se muestra mientras carga la app; normalmente el fondo de tu página. |
icons | Iconos PNG con sizes y type; "purpose": "maskable" marca los iconos que se pueden recortar con seguridad. |
Cómo instalar los archivos en tu sitio
- Descomprime la descarga y sube el archivo manifest y la carpeta de iconos a la raíz de tu sitio (para que las rutas de los iconos coincidan con la carpeta que indicaste).
- Pega las etiquetas de
head-tags.htmlen el<head>de cada página. - Sirve el manifest con el tipo MIME
application/manifest+jsonsi tu servidor te permite configurarlo. - Abre tu sitio en Chrome y ve a DevTools → Application → Manifest para buscar errores y ver si se puede instalar.
¿Vas a crear un sitio nuevo? El Generador de plantilla HTML crea una página inicial con el enlace al manifest ya incluido, y el Generador de favicon crea los iconos de la pestaña del navegador.
Preguntas frecuentes
¿Qué es un web app manifest?
Es un archivo JSON, enlazado con <link rel="manifest">, que le indica al navegador cómo debe comportarse tu sitio cuando se instala como app: su nombre, iconos, colores, URL de inicio y si se abre en una ventana independiente sin la interfaz del navegador.
¿Qué tamaños de icono necesita una PWA?
Como mínimo, un PNG de 192×192 y otro de 512×512; Chrome los usa para el icono de la pantalla de inicio y la pantalla de bienvenida. Añadir tamaños de 48 a 384 px permite a los dispositivos elegir uno más nítido, y se necesita un apple-touch-icon de 180×180 para las pantallas de inicio de iOS, que en versiones antiguas no usan los iconos del manifest.
¿Qué es un icono maskable?
Android recorta los iconos de las apps en círculos, squircles o cuadrados redondeados. Un icono maskable tiene su logotipo dentro de una zona segura central (un círculo con un radio del 40 %, es decir, el 80 % del ancho) y un fondo sólido que llena todo el cuadrado, para que se vea bien con cualquier máscara. Decláralo con "purpose": "maskable".
¿Debo llamarlo manifest.json o manifest.webmanifest?
Los dos funcionan. La especificación sugiere la extensión .webmanifest con el tipo MIME application/manifest+json, pero los navegadores también aceptan manifest.json. Solo asegúrate de que la etiqueta link apunte al archivo que subas.
¿Cuál es la diferencia entre start_url, scope e id?
start_url es la página que se abre al iniciar la app. scope limita qué URL forman parte de la app; al navegar fuera de ese ámbito se muestra la interfaz del navegador. id es una identidad estable para la app; si se omite, se deriva de start_url, así que defínelo si tu URL de inicio puede cambiar.
¿Qué modo de visualización debo elegir?
standalone es la opción habitual: la app se abre en su propia ventana sin barra de direcciones. fullscreen oculta también la barra de estado (ideal para juegos), minimal-ui mantiene unos controles de navegación mínimos y browser abre una pestaña normal.
¿Basta con un manifest para que mi sitio se pueda instalar?
Los navegadores también exigen que el sitio se sirva por HTTPS. Chrome y Edge pueden buscar además un service worker para ofrecer una invitación de instalación con soporte completo sin conexión; el manifest aporta el nombre, los iconos y el comportamiento al iniciar.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.