Por qué Totalum, Cursor, Lovable y Bolt no reemplazan un generador de iconos
Totalum, 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 en el modal al generar
Primero escribe la descripción en el campo (o usa un ejemplo) y pulsa **Generar imagen**. Se abre un modal: elige Flat, Metallic, 2D Game, Clay, 3D, Gradient o Glassmorphism (cada uno con miniatura) y confirma. El estilo se combina con tu texto para orientar a Imagen.
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 27 archivos 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 (Totalum, Cursor, Lovable o Bolt)
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.
TTotalum
Si tu proyecto corre en Totalum, conecta el MCP de Imagcon a Cursor y genera los iconos sin salir del editor:
Usa el MCP de Imagcon para generar el paquete de iconos PWA de mi app Totalum.
Descripción del icono: [describe el icono aquí]
Cuando tengas los archivos, colócalos en public/icons/ y actualiza manifest.json con las rutas correctas.Totalum + Cursor + Imagcon MCP = iconos en producción sin salir del chat.
O mejor aún: usa el MCP de Imagcon
Dile a tu agente que conecte el MCP. Él genera los iconos.
Añade el paquete MCP de Imagcon a tu editor y pide los iconos directamente en el chat — sin copiar archivos, sin salir del editor. Corre en tu máquina como proceso local. Compatible con Totalum, proyectos locales y cualquier stack.
{
"mcpServers": {
"imagcon": {
"command": "uvx",
"args": ["imagcon-mcp", "--api-key", "ic_live_TU_CLAVE"]
}
}
}
// Si PyPI no está disponible, usa el release de GitHub:
{
"mcpServers": {
"imagcon": {
"command": "uvx",
"args": ["--from", "https://github.com/Explorer-64/Imagcon-/releases/download/v0.2.1/imagcon_mcp-0.2.1-py3-none-any.whl", "imagcon-mcp", "--api-key", "ic_live_TU_CLAVE"]
}
}
}Usando el MCP de Imagcon, genera el paquete completo de iconos PWA para mi app. Descripción del icono: [describe aquí]. Guarda el conjunto y dame el enlace de descarga ZIP.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">.