Categoría: Desarrollo
Generador de Web App Manifest
Genera un manifest.webmanifest para aplicaciones web instalables
Rellena el nombre de tu app, la URL de inicio, el modo de visualización, los colores de tema y fondo, y la lista de iconos, y obtén un archivo JSON manifest.webmanifest listo para usar que hace que un sitio sea instalable como Progressive Web App. Todo se genera localmente en tu navegador.
{
"name": "LocalTools",
"short_name": "LocalTools",
"start_url": "/",
"display": "standalone",
"theme_color": "#1f6f4a",
"background_color": "#faf8f3",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
Un web app manifest es el archivo JSON que le indica a un navegador cómo debe comportarse tu sitio al instalarse: su nombre e icono en una pantalla de inicio, el color de la barra de estado, si se abre en una ventana independiente o en una pestaña normal del navegador, y dónde empieza. Sin uno, "Añadir a pantalla de inicio" no se ofrece o se reduce a un simple marcador en lugar de una experiencia tipo app.
Cómo se usa
- Introduce el nombre, el nombre corto y la URL de inicio de tu app.
- Elige un modo de visualización, un color de tema y un color de fondo.
- Enumera tus iconos, uno por línea, como una ruta y un tamaño, por ejemplo "/icon-192.png 192x192".
- Copia el JSON en un archivo manifest.webmanifest y enlázalo desde el <head> de tu página con <link rel="manifest" href="/manifest.webmanifest">.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Qué tamaños de iconos necesito?
- Como mínimo, un PNG de 192x192 y otro de 512x512 cubren la mayoría de los avisos de instalación y usos de icono de la app; añade más tamaños si quieres iconos más nítidos en plataformas específicas.
- ¿Cuál es la diferencia entre theme_color y background_color?
- theme_color tiñe la interfaz del navegador (como la barra de direcciones o la barra de estado) alrededor de tu app; background_color se muestra brevemente como fondo de la pantalla de carga mientras la app se inicia, antes de que se pinte su propio contenido.
- ¿Sigo necesitando esto si no estoy creando una PWA?
- Un manifest también mejora cómo aparecen el icono y el nombre de un sitio cuando un visitante lo marca o lo añade a su pantalla de inicio, incluso sin soporte completo de service worker/uso sin conexión.