Generador de iconos PWA con IA para Cursor, Lovable, Bolt y v0
Las herramientas de IA escriben código rápido, pero no te entregan los PNG listos para producción. Imagcon genera por prompt todos los tamaños PWA, AppIcon.appiconset (Contents.json), mipmaps Android, 16 splash iOS y un manifest.json para integrarlos en tu repo.
Por qué Cursor, Lovable, Bolt y v0 no reemplazan un generador de iconos
Cursor, Lovable, Bolt y v0 ayudan con scaffold y lógica, pero no crean archivos de imagen reales. El manifest suele traer rutas de ejemplo mientras /icons/ sigue vacío.
El flujo es: generar archivos en Imagcon y luego pedirle a tu IA que cablee rutas y etiquetas en el proyecto.
Antes del ZIP: estilos y edición con IA en el workspace
Siete estilos al generar
En el workspace, antes de Generar, elige Flat, Metallic, 2D Game, Clay, 3D, Gradient o Glassmorphism — cada uno con miniatura. Así orientas a Imagen 4.0 hacia la estética que quieres; sigues describiendo el motivo del icono en lenguaje natural.
Refinar con edición por IA
Tras generar, abre el Editor de imagen: describe el cambio en texto (p. ej. «quitar las gafas», «borde dorado fino»). Google Gemini en Vertex AI aplica el ajuste; cambios grandes pueden tardar uno o dos minutos. Combina con dibujo, texto y recorte, o regenera desde cero.
Genera iconos con un prompt en Imagcon
Entra en imagcon.app, regístrate gratis y describe el icono en lenguaje natural — como le hablarías a una IA.
Ejemplos de prompt
- "Degradado azul oscuro con rayo blanco"
- "Hoja verde minimalista sobre blanco, flat"
- "Onda abstracta morada, estilo SaaS moderno"
En el ZIP recibes: los 19 tamaños PWA, variantes maskable, 16 splash iOS, carpetas mipmap Android, AppIcon.appiconset (Xcode) con Contents.json y un manifest.json listo.
Coloca los archivos en la carpeta public del proyecto
La mayoría de stacks sirve /public en la raíz del sitio. Los iconos en /public/icons/ se publican como /icons/ en el navegador.
| Stack / herramienta | Iconos en | manifest.json en |
|---|---|---|
| Vite (React/Vue/Svelte) | /public/icons/ | /public/manifest.json |
| Create React App | /public/icons/ | /public/manifest.json |
| Next.js (App Router) | /public/icons/ | /public/manifest.json |
| Lovable (Vite por debajo) | /public/icons/ | /public/manifest.json |
| Proyecto en Cursor (cualquier framework) | Igual arriba — revisa package.json | Igual arriba |
| Bolt / v0 (export a Vite/React) | /public/icons/ | /public/manifest.json |
Revisa manifest.json
La descarga ya incluye manifest.json. Si lo armás a mano, usá esta plantilla (ajustá nombre y colores):
{
"name": "Your App Name",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{ "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icons/icon-192x192-maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
}
]
}Pega un prompt en tu herramienta (Cursor, Lovable, Bolt o v0)
CCursor
Abre el chat de IA (Cmd+L / Ctrl+L) y pega:
Descargué mis iconos PWA desde Imagcon. El ZIP incluye:
- carpeta /icons/ con icon-72x72.png hasta icon-512x512.png
- icon-512x512-maskable.png (Android)
- manifest.json listo
- carpeta splash/ con imágenes de lanzamiento iOS
- AppIcon.appiconset (Xcode) con Contents.json
- carpetas mipmap Android
Por favor:
1. Copia /icons/ a /public/icons/
2. Copia manifest.json a /public/manifest.json
3. Agrega <link rel="manifest" href="/manifest.json"> en index.html
4. Agrega <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> en index.html
5. Integra AppIcon.appiconset y mipmaps según mi proyecto iOS/AndroidLLovable
Sube los archivos a public/icons/ y usa el chat:
- 1. Ícono de archivos en la barra lateral → Subir archivos
- 2. Crea o abre public/icons/
- 3. Sube todos los PNG del ZIP de Imagcon
- 4. En el chat de Lovable pega el prompt de abajo
Tengo los archivos de iconos PWA listos (Imagcon). Necesito:
1. Poner los PNG en /public/icons/
2. Configurar manifest.json para instalación PWA
3. Enlazar el manifest en index.html
El manifest debe referenciar /icons/icon-{size}x{size}.png, incluir 192x192 y 512x512 y un maskable 192x192 para Android.B/vBolt y v0
Tras exportar el proyecto (suele ser Vite/React), tratá como en Cursor: PNGs en public/icons/, manifest en public/, y pegá:
Exporté la app desde Bolt/v0. Incorpora los iconos generados en Imagcon:
- public/icons/ con todos los tamaños PWA
- public/manifest.json
- enlaces en index.html para manifest y apple-touch-icon
Mantén rutas coherentes con el Vite/React generado.Bolt y v0 aceleran la UI; Imagcon entrega el paquete de iconos que el código referencia.
Valida la PWA y los iconos
Chrome DevTools
- 1.Abre la app en Chrome
- 2.DevTools → Application
- 3.Manifest en el panel izquierdo
- 4.Comprueba iconos sin 404
- 5.Verifica “Añadir a pantalla de inicio”
Lighthouse (PWA)
- 1.DevTools → Lighthouse
- 2.Marca Progressive Web App
- 3.Analiza la carga
- 4.Corrige ítems rojos relacionados con iconos
Problemas frecuentes
Problema: Los iconos no aparecen en Application → Manifest
Solución: Asegura <link rel="manifest" href="/manifest.json"> en el <head> de index.html.
Problema: El manifest carga pero los iconos dan 404
Solución: Las rutas deben coincidir con la URL pública: /public/icons/ se sirve como /icons/...
Problema: Lighthouse dice que no es instalable
Solución: Necesitas 192×192 y 512×512; display "standalone" o "fullscreen".
Problema: Apple touch icon no funciona en iOS
Solución: Agrega <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">.