¿Odias los anuncios? Ir Sin publicidad Hoy 

Generador de Manifest de Aplicación Web PWA

DatosDesarrollador

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

Identidad de la app

Nombre

Nombre completo de la app que se muestra en el mensaje de instalación y en la pantalla de inicio

Nombre corto

Usado en la pantalla de inicio (se recomienda 12 caracteres o menos)

Descripción

Lang

Idioma principal (etiqueta BCP 47, por ejemplo en-US, fr, de-DE)

Dirección de texto

Navegación

URL de inicio

URL que se abre cuando se inicia la app

Alcance

Límite de navegación para la app (opcional)

ID de la app

Identidad única para la app (opcional, recomendado)

Visualización

Modo de visualización

Orientación

Color del tema

Colorea la barra del navegador o la barra de estado cuando la app está abierta

Color de fondo

Color de fondo en la pantalla de inicio mientras se carga la app

Iconos

Ruta base de los iconos

Carpeta donde se encuentran los archivos de iconos (se usa para construir URLs de origen)

Patrón de nombre del icono

Usa {size} como sustituto — se reemplaza con cada tamaño seleccionado

Tipo MIME del icono

Propósito del icono

Incluir 72×72

Incluir 96×96

Incluir 128×128

Incluir 144×144

Incluir 152×152

Incluir 192×192

Incluir 384×384

Incluir 512×512

PROD.

Lado cliente

manifest.json

Etiqueta HTML de enlace

ANUNCIO · ¿ELIMINAR?

Guía

Generador de Manifest de Aplicación Web PWA

Genera un archivo válido manifest.json para tu Progressive Web App en segundos. Rellena la identidad de tu app, elige un modo de visualización, selecciona los tamaños de icono que ofreces, y el generador produce JSON limpio que puedes pegar directamente en tu proyecto, además del <link rel="manifest"> etiqueta para tu HTML.

Cómo Usar

Ingresa la identidad de tu app Nombre y Nombre corto. El nombre completo aparece en el mensaje de instalación; el nombre corto se muestra debajo del icono en la pantalla de inicio.
Configura el URL de inicio, Alcance, y opcionalmente el ID de la app para que el navegador sepa qué lanzar y cómo limitar la navegación.
Elige un Modo de visualización (estándar, pantalla completa, interfaz mínima, navegador) y un Orientación.
Elige un Color del tema (interfaz del navegador) y un Color de fondo (pantalla de inicio).
Configura el Ruta base de los iconos y un Patrón de nombre del archivo usando {size} como sustituto, luego marca los tamaños de icono que realmente ofreces.
Copia el generado manifest.json o haz clic en el icono de descarga. Pega la <link rel="manifest"> etiqueta en tu <head>.

Características

Todos los campos estándar del manifest – nombre, short_name, descripción, lang, dir, id, start_url, scope, display, orientation, theme_color, background_color.
Lista de tamaños de icono – 72, 96, 128, 144, 152, 192, 384 y 512 px, con URLs automáticamente generadas desde una ruta base y un patrón de nombre de archivo. src Soporte del propósito del icono
Icono de propósito de soporte – cualquier, adaptativo, “cualquiera adaptativo” y monocromático.
Vista previa en tiempo real de JSON – JSON formateado y actualizado en tiempo real mientras escribes, con resaltado de sintaxis.
Verificaciones de instalabilidad – avisa cuando faltan nombre, start_url o el par recomendado de iconos 192x192 y 512x512.
Copiar o descargar – copia en un solo clic, o descarga como manifest.json con el tipo MIME correcto.
Etiqueta HTML de enlace – fragmento listo para pegar <link rel="manifest"> .
100% del lado del cliente – nada sale de tu navegador. No se requieren cuentas ni límites.

 Preguntas frecuentes

¿Qué es un manifest de app web?

Un manifest de app web es un archivo JSON que indica al navegador cómo debe comportarse tu Progressive Web App cuando se instala. Contiene el nombre de la app, los iconos, la URL de inicio, el modo de visualización, los colores temáticos y otros metadatos utilizados por el mensaje de instalación, la pantalla de inicio y el lanzador en la pantalla de inicio.
¿Qué campos son necesarios para que una PWA sea instalable?

Al menos, los navegadores esperan el nombre (o short_name), la URL de inicio, el modo de visualización establecido en standalone, fullscreen o minimal-ui, y al menos un icono de 192x192 y uno de 512x512. Añadir theme_color y background_color se recomienda fuertemente para una experiencia de instalación pulida.
¿Cuál es la diferencia entre los modos de visualización?

standalone oculta la interfaz del navegador y se ve como una app nativa. fullscreen también oculta la barra de estado, útil para juegos. minimal-ui mantiene un conjunto pequeño de controles del navegador. browser abre la app en una pestaña normal. La mayoría de las PWAs eligen standalone.
¿Qué significa el campo de propósito del icono?

purpose indica cómo puede renderizarse un icono. "any" es el valor por defecto y permite al navegador comporar el icono de la manera que quiera. "maskable" significa que la imagen está diseñada para llenar una zona segura definida por el sistema operativo, por lo que el lanzador puede recortarla en un círculo, un cuadrado redondeado o un cuadrado redondeado sin recortar contenido importante.
¿Dónde debo colocar manifest.json y la etiqueta de enlace?

Coloca manifest.json en la raíz de tu sitio o en una ruta estable, luego referencia desde cada página HTML con una etiqueta dentro del . Asegúrate de que el archivo se sirva con el tipo de contenido application/manifest+json.