nicetool.dev logo

Generador de Assets PWA - Crea Iconos y Manifiesto de App

Genera iconos PWA y manifiesto localmente en tu navegador. Tus imágenes nunca salen de tu dispositivo.

Subir imagen

Arrastra y suelta la imagen aquí o haz clic para seleccionar archivo

Soporta PNG/JPEG, mínimo 512x512px

Configuración del Manifiesto

Vista Previa de Iconos

192x192

192x192px

Android / Chrome

512x512

512x512px

Pantalla de Carga

180x180

180x180px

Pantalla de Inicio iOS

512x512

512x512px

Enmascarable (Adaptable)

Vista Previa del Manifiesto

Enlaces HTML para Head
💡 Todo el procesamiento ocurre del lado del cliente para asegurar privacidad y velocidad.
¿Qué es el Generador de Assets PWA?
El Generador de Assets PWA es una herramienta gratuita que te ayuda a crear todos los activos necesarios para Progressive Web Apps (PWA) a partir de una sola imagen fuente. La herramienta genera automáticamente favicon.ico, apple-touch-icon, iconos en varios tamaños (16x16, 32x32, 192x192, 512x512...) y un archivo manifest.json completo. Todo el procesamiento ocurre del lado del cliente, garantizando rapidez y seguridad absoluta para tus imágenes.
Tamaños de Iconos PWA Estándar
La herramienta genera automáticamente iconos de acuerdo con los estándares de PWA y Apple, incluyendo:
Favicon
favicon.ico (32x32) - Icono mostrado en la pestaña del navegador
Móvil y Tablet
192x192, 384x384, 512x512 - Iconos para Android y pantalla de inicio
Apple Touch Icon
180x180 - Icono para iOS cuando se añade a la pantalla de inicio
Varios Tamaños
16x16, 32x32, 48x48, 72x72, 96x96, 120x120, 144x144, 152x152, 167x167
Manifest.json - El Corazón de la PWA
El archivo manifest.json es el archivo de configuración más importante para PWA, conteniendo información sobre:
  • •Nombre de la App (name, short_name) - Mostrado al instalar
  • •Iconos - Lista de todos los iconos con tamaños y propósitos
  • •Color del tema - Color principal para la barra de la app y barra de direcciones
  • •URL de inicio - URL de lanzamiento al abrir la app desde la pantalla de inicio
  • •Modo de visualización - Modo de visualización (standalone, fullscreen...)
Características Clave
1
Subir Imagen HD
Soporta PNG/JPEG con tamaño mínimo de 512x512px para mejor calidad
2
Generación de Iconos Multi-tamaño
Redimensiona automáticamente y crea más de 13 tamaños de iconos siguiendo las guías de PWA y Apple
3
Auto Manifest.json
Genera manifest.json estándar con metadatos completos y referencias de iconos
4
Favicon.ico
Crea favicon.ico estándar para SEO y visualización en pestañas del navegador
5
Procesamiento del Lado del Cliente
Procesamiento 100% basado en el navegador, las imágenes nunca se suben al servidor
6
Descarga ZIP
Empaqueta todos los archivos en un conveniente archivo .zip
Aplicaciones del Mundo Real
1
Desarrollo PWA
Genera rápidamente activos para proyectos de Progressive Web App, ahorrando horas de trabajo manual
2
Branding de Sitios Web
Crea favicon e iconos táctiles profesionales para sitios web, mejorando el reconocimiento de marca
3
Landing de App Móvil
Prepara activos para páginas web instalables que funcionan como apps nativas en móviles
Beneficios de SEO y UX
✓
Favicon aumenta el CTR en SERP - Los usuarios reconocen tu sitio web más fácilmente
✓
PWA mejora Core Web Vitals - Mejor ranking en Google
✓
Apple Touch Icon - Experiencia nativa cuando se añade a la Pantalla de Inicio de iOS
✓
manifest.json completo - Google indexa y entiende mejor tu app
Notas Importantes
  • •La imagen fuente debe ser mínimo de 512x512px, recomendado 1024x1024px
  • •Usa imágenes con fondo transparente (PNG) para mejores resultados
  • •Todo el procesamiento es local, las imágenes nunca se suben al servidor
  • •El archivo ZIP incluye: favicon.ico, iconos (13 tamaños), manifest.json
 Cómo usar: Generador de Assets PWA
  1. 1
    Sube un logo cuadrado PNG o JPEG de al menos 512 x 512 píxeles. Una forma simple con algo de margen se ve mejor en tamaños pequeños.
  2. 2
    Rellena los campos del manifiesto: nombre de la app, nombre corto (aparece bajo el icono), descripción, URL de inicio, color de tema y color de fondo.
  3. 3
    Activa la máscara circular si quieres iconos redondos y revisa las vistas previas para Android, iOS, la pantalla de bienvenida y el icono maskable.
  4. 4
    Pulsa Generate & Download para obtener un ZIP con todos los tamaños y manifest.json. Copia las etiquetas link que aparecen debajo en el <head> de tu sitio.
 Ejemplos prácticos
Hacer instalable un sitio
Chrome y Edge solo ofrecen "Instalar aplicación" si hay un manifiesto válido con iconos de 192 y 512 píxeles. Los archivos generados cumplen ese requisito.
Iconos de inicio en iOS
Safari ignora los iconos del manifiesto y usa apple-touch-icon. El ZIP incluye un icono de 180 x 180 y su etiqueta link.
Iconos maskable para Android
Android recorta los iconos en círculos o cuadrados redondeados según el dispositivo. Un icono maskable mantiene el logo en la zona segura para que nunca se corte.
Cambiar de imagen rápido
Si cambia el logo, súbelo una vez y reemplaza todo el juego de iconos en lugar de exportar una docena de tamaños a mano.
 Preguntas frecuentes
¿Qué es un web app manifest?+
manifest.json es un pequeño archivo JSON que indica al navegador el nombre, iconos, colores y URL de inicio de tu web app. Permite instalar y abrir el sitio como una app nativa.
¿Qué tamaños de icono son obligatorios?+
Para ser instalable, Chrome exige al menos 192 x 192 y 512 x 512. iOS usa un apple-touch-icon de 180 x 180. Los tamaños extra mejoran la nitidez en algunos lanzadores y dispositivos antiguos.
¿Diferencia entre theme_color y background_color?+
theme_color colorea la barra del navegador y el selector de tareas. background_color rellena la pantalla de bienvenida mientras carga la app y debería coincidir con el fondo de la primera pantalla.
¿Se suben mis imágenes?+
No. El redimensionado y el ZIP se crean con la API Canvas en tu navegador, así que los logos sin publicar no salen de tu dispositivo.