Generador de Manifest

Generador de Web App Manifest - Crea manifest.json PWA

Herramienta completa para generar archivos Web App Manifest (manifest.json) para aplicaciones web progresivas. Configura metadatos, iconos, colores, modos de pantalla y mas. Imprescindible para hacer que tu app web sea instalable en moviles y escritorio.

Que es un Web App Manifest?

El Web App Manifest es un archivo JSON que indica al navegador como debe comportarse tu PWA cuando se instala en el dispositivo del usuario.\n\n**Componentes clave:**\n\n**Informacion basica:**\n- name: Nombre completo de la app (ej. "Mi Aplicacion Genial")\n- short_name: Nombre corto para pantalla de inicio (max 12 caracteres)\n- description: Que hace tu app\n- start_url: URL que se carga al iniciar\n- scope: Alcance de navegacion de la app\n\n**Configuracion de pantalla:**\n- display: Como se muestra (standalone, fullscreen, etc.)\n- orientation: Orientacion preferida\n- lang: Codigo de idioma principal\n\n**Identidad visual:**\n- theme_color: Color de la UI del navegador\n- background_color: Color de la pantalla de inicio\n- icons: Iconos en diferentes tamanos\n\n**Extras:**\n- categories: Clasificacion en tiendas\n- screenshots: Vista previa en prompts de instalacion\n- shortcuts: Accesos directos (opcional)\n\nSin un manifest valido, tu app no puede ofrecer instalacion ni experiencia tipo nativa.

Por que necesito un manifest.json?

El manifest.json convierte tu sitio en una aplicacion instalable. Permite:\n- Agregar la app a la pantalla de inicio\n- Controlar como se ve al iniciarse (sin UI de navegador)\n- Definir iconos, colores y splash screen\n- Mostrar nombre y descripcion en prompts de instalacion\n- Pasar auditorias PWA como Lighthouse\n- Mejorar la retencion del usuario al ofrecer modo app\n\nSin manifest, el navegador trata tu sitio como pagina web tradicional sin capacidad de instalacion.

Como usar el generador de manifest?

**Paso 1: Informacion basica**\n\n1. **Nombre de la app (requerido):**\n - Ingresa el nombre completo\n - Aparece en prompts de instalacion y listas de apps\n - Ejemplo: "Gestor de Tareas Pro"\n\n2. **Nombre corto:**\n - Version abreviada para la pantalla de inicio\n - Maximo 12 caracteres\n - Ejemplo: "TareasPro"\n - Si lo omites, se usa el nombre completo\n\n3. **Descripcion:**\n - Explica brevemente la app\n - Se muestra en tiendas y prompts\n - Ejemplo: "Organiza tus tareas y recordatorios"\n\n4. **Start URL:**\n - URL que se abre al lanzar la app\n - Normalmente "/" (raiz)\n - Puede ser una pagina especifica: "/panel"\n\n5. **Scope:**\n - Define los limites de navegacion\n - Las URLs dentro del alcance usan modo app\n - Fuera del alcance se abre en navegador\n - Por defecto "/" para cubrir todo el sitio\n\n**Paso 2: Pantalla y orientacion**\n\n1. **Modo de visualizacion:**\n - Standalone: experiencia tipo app, sin barra de navegador\n - Fullscreen: oculta tambien la barra de estado\n - Minimal UI: controles basicos del navegador\n - Browser: pestaña normal del navegador\n\n2. **Orientacion:**\n - Any: permite rotacion (predeterminado)\n - Portrait: bloquea en vertical\n - Landscape: bloquea en horizontal\n - Vert./Horiz. primaria: orientacion especifica\n\n3. **Idioma:**\n - Codigo ISO 639-1 (en, es, fr, etc.)\n - Predeterminado: en\n\n**Paso 3: Tema y colores**\n\n1. **Color del tema:**\n - Color de la UI (barra de direccion, multitarea)\n - Usa selector o ingresa codigo hex\n - Ejemplo: #2196F3\n\n2. **Color de fondo:**\n - Color mostrado en splash screen\n - Debe coincidir con el fondo principal de la app\n - Ejemplo: #ffffff\n\n**Paso 4: Iconos**\n\n1. Haz clic en "Agregar icono"\n2. Para cada icono define:\n - URL de la imagen (ruta o CDN)\n - Tamanos (192x192, 512x512, etc.)\n - Tipo (image/png, image/svg+xml)\n - Proposito (any, maskable, monochrome)\n\n**Iconos recomendados:**\n- 192x192: minimo para prompt de instalacion\n- 512x512: alta resolucion para splash screen\n- Maskable: iconos adaptables, respeta zona segura\n\n**Paso 5: Capturas (opcional)**\n\n1. Clic en "Agregar captura"\n2. Para cada captura define:\n - URL de la imagen\n - Resolucion (1280x720, 750x1334)\n - Plataforma (wide = escritorio, narrow = movil)\n - Etiqueta descriptiva\n\nSe usan en:\n- Prompts de instalacion\n- Tiendas de aplicaciones\n- Hoja para compartir\n\n**Paso 6: Info adicional**\n\n1. **Categorias:** lista separada por comas. Disponibles: business, education, entertainment, finance, fitness, food, games, government, health, kids, lifestyle, magazines, medical, music, navigation, news, personalization, photo, politics, productivity, security, shopping, social, sports, travel, utilities, weather.\n\n2. **ID IARC:** identificador de clasificacion de contenido (opcional).\n\n**Paso 7: Generar**\n\n1. Haz clic en "Generar manifest"\n2. Revisa el JSON generado\n3. Copia o descarga como manifest.json\n4. Sube el archivo a la raiz de tu sitio\n5. Vincula en HTML: `<link rel=\"manifest\" href=\"/manifest.json\">`\n\n**Consejos:**\n- Usa iconos PNG para maxima compatibilidad\n- Proporciona multiples tamanos\n- Elige colores coherentes con la marca\n- Prueba el manifest con Lighthouse\n- Valida con PWA Manifest Validator

Modos de display explicados

**Modos de visualizacion:**\n\nControlan como se muestra tu PWA al abrirse desde la pantalla de inicio.\n\n**1. Standalone (Recomendado)**\n- Luzca como una app nativa\n- Sin barra de direccion\n- Sin botones del navegador\n- Muestra barra de estado (hora, bateria)\n- Ventana propia en el selector de tareas\n\n**Ideal para:** la mayoria de PWAs que buscan experiencia nativa.\n\n**2. Fullscreen**\n- Ocupa toda la pantalla\n- Oculta la barra de estado\n- Sin UI del navegador\n- Inmersivo para juegos, video o presentaciones\n\n**3. Minimal UI**\n- Muestra controles basicos (atras, recargar)\n- Combina experiencia nativa con elementos del navegador\n- Util para apps que necesitan navegacion minima\n\n**4. Browser**\n- Se abre como pestaña normal\n- Mantiene toda la interfaz del navegador\n- Ideal para apps que dependen de funciones del navegador\n\n**Notas:** puedes cambiar display segun la experiencia que quieras ofrecer. Standalone suele ser la mejor opcion para PWAs publicas.

Buenas practicas para crear iconos PWA

Los iconos correctos garantizan una apariencia profesional en cualquier dispositivo.\n\n**Recomendaciones:**\n- Usa PNG con fondo transparente\n- Genera al menos 192x192 y 512x512\n- Incluye versiones maskable para iconos adaptativos\n- Mantiene un margen de seguridad (zona segura)\n- Evita texto pequeno que pueda perderse en tamanos reducidos\n\n**Propiedad `purpose`:**\n- any: icono estandar\n- maskable: para iconos adaptables en Android\n- monochrome: para interfaces que requieren un solo color\n\n**Optimizacion:**\n- Comprime iconos sin perder calidad\n- Usa servicio CDN para servirlos rapido\n- Verifica que las URLs sean absolutas o relativas validas\n\nIconos bien definidos mejoran la apariencia del prompt de instalacion y la pantalla de inicio del usuario.

Como enlazo y pruebo manifest.json?

Despues de generar tu manifest:\n\n1. Subelo al directorio de tu sitio (por ejemplo, `/manifest.json`).\n2. Agrega en tu HTML dentro de `<head>`: `<link rel=\"manifest\" href=\"/manifest.json\">`.\n3. Implementa un Service Worker para habilitar instalacion completa.\n4. Usa Chrome DevTools > Application > Manifest para inspeccionar.\n5. Ejecuta la auditoria Lighthouse (modo PWA) para verificar requisitos.\n6. Prueba en dispositivos reales: Android Chrome y Microsoft Edge soportan instalacion nativa.\n7. Limpia cache/nav datos si haces cambios y no se reflejan.\n\nSi el manifest no se carga, revisa ruta, cabeceras MIME (debe ser `application/manifest+json`) y asegurate de que no haya errores de CORS.

Funciones avanzadas del manifest

El manifest admite propiedades avanzadas para experiencias mas ricas:\n\n- **shortcuts:** accesos directos desde la app (ej. abrir /nueva-tarea).\n- **share_target:** permite que la app reciba contenido compartido desde otras apps.\n- **protocol_handlers:** registra esquemas personalizados (ej. web+app://).\n- **file_handlers:** abre tipos de archivo especificos dentro de tu PWA.\n- **related_applications:** enlaza apps nativas en tiendas (Android, iOS, Microsoft).\n- **prefer_related_applications:** sugiere instalar la app nativa si existe.\n- **screenshots:** mejora la presentacion en prompts y tiendas.\n\nUsa estas opciones segun las necesidades de tu proyecto para acercar tu PWA a una experiencia nativa completa.

Funciones destacadas

• Interfaz intuitiva para crear manifest.json
• Soporte para opciones de PWA instalable
• Generador de iconos y capturas multiples
• Selector de colores de tema y fondo
• Modos de visualizacion y orientacion configurables
• Validaciones en tiempo real de campos requeridos
• Soporte para shortcuts, screenshots y categorias
• Compatibilidad con ID de clasificacion IARC
• Iconos maskable compatibles
• Validacion de sintaxis JSON
• Salida formateada y legible
• Copiar manifest al portapapeles
• Descarga directa como manifest.json
• Buenas practicas PWA integradas
• Procesamiento 100% en el navegador
• Sin envio de datos al servidor
• Interfaz adaptable a moviles
• Modo oscuro disponible
• Uso gratuito e ilimitado