Gerador de ícones PWA com IA para Cursor, Lovable, Bolt e v0
Ferramentas de IA escrevem código rápido, mas não entregam PNGs prontos para produção. O Imagcon gera por prompt todos os tamanhos PWA, o AppIcon.appiconset (com Contents.json), mipmaps Android, 16 telas de splash iOS e um manifest.json — para você colar no projeto.
Por que Cursor, Lovable, Bolt e v0 não substituem um gerador de ícones
Cursor, Lovable, Bolt e v0 são ótimos para scaffold e lógica — mas não produzem arquivos de imagem reais. O manifest costuma vir com caminhos de exemplo enquanto as pastas /icons/ ficam vazias.
O fluxo é: gerar os arquivos no Imagcon e depois pedir à sua IA para encaixar paths e links no projeto.
Antes do ZIP: estilos e edição com IA no workspace
Sete estilos visuais ao gerar
No workspace, antes de Gerar, escolha um preset — Flat, Metallic, 2D Game, Clay, 3D, Gradient ou Glassmorphism — cada um com miniatura. Isso orienta o Imagen 4.0 para a estética certa; você continua descrevendo o assunto do ícone em linguagem natural.
Refinar com edição por IA
Depois de gerar, abra o Editor de imagens: descreva a mudança em texto (ex.: «tirar os óculos», «borda dourada fina»). O Google Gemini no Vertex AI aplica o ajuste; edições grandes podem levar um ou dois minutos. Combine com desenho, texto e corte, ou regenere do zero.
Gere ícones por prompt de texto no Imagcon
Acesse imagcon.app, entre de graça e descreva o ícone em linguagem natural — como falaria para uma IA.
Exemplos de prompt
- "Gradiente azul escuro com raio branco"
- "Folha verde minimalista em fundo branco, flat"
- "Onda abstrata roxa, estilo SaaS moderno"
No ZIP você recebe: os 19 tamanhos PWA, variantes maskable, 16 splash screens iOS, pastas mipmap Android, AppIcon.appiconset (Xcode) com Contents.json e um manifest.json pronto.
Coloque os arquivos na pasta public do projeto
A maioria dos stacks expõe /public na raiz do site. Ícones em /public/icons/ são servidos como /icons/ no navegador.
| Stack / ferramenta | Ícones em | manifest.json em |
|---|---|---|
| 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 baixo) | /public/icons/ | /public/manifest.json |
| Projeto no Cursor (qualquer framework) | Igual acima — veja o package.json | Igual acima |
| Bolt / v0 (export para Vite/React) | /public/icons/ | /public/manifest.json |
Confira o manifest.json
O download já inclui manifest.json. Se for montar manualmente, use este modelo (ajuste nome e cores):
{
"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"
}
]
}Cole um prompt na sua ferramenta (Cursor, Lovable, Bolt ou v0)
CCursor
Abra o chat da IA (Cmd+L / Ctrl+L) e cole:
Baixei meus ícones PWA no Imagcon. O ZIP contém:
- pasta /icons/ com icon-72x72.png até icon-512x512.png
- icon-512x512-maskable.png (Android)
- manifest.json pronto
- pasta splash/ com imagens de lançamento iOS
- AppIcon.appiconset (Xcode) com Contents.json
- pastas mipmap Android
Por favor:
1. Copie /icons/ para /public/icons/
2. Copie manifest.json para /public/manifest.json
3. Adicione <link rel="manifest" href="/manifest.json"> no index.html
4. Adicione <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> no index.html
5. Integre AppIcon.appiconset e mipmaps conforme o meu projeto (iOS/Android)LLovable
Envie os arquivos para public/icons/ e use o chat:
- 1. Ícone de arquivos na barra lateral → Enviar arquivos
- 2. Crie ou abra public/icons/
- 3. Envie todos os PNGs do ZIP do Imagcon
- 4. No chat da Lovable, cole o prompt abaixo
Tenho os arquivos de ícone PWA prontos (Imagcon). Preciso:
1. Colocar os PNGs em /public/icons/
2. Configurar manifest.json para instalação PWA
3. Linkar o manifest no index.html
O manifest deve referenciar /icons/icon-{size}x{size}.png, incluir 192x192 e 512x512 e um maskable 192x192 para Android.B/vBolt e v0
Depois de exportar o projeto (geralmente Vite/React), trate como no Cursor: coloque os PNGs em public/icons/, manifest em public/, e cole:
Exportei o app do Bolt/v0. Inclua os ícones gerados no Imagcon:
- public/icons/ com todos os tamanhos PWA
- public/manifest.json
- links no index.html para manifest e apple-touch-icon
Mantenha os paths consistentes com o Vite/React gerado.Bolt e v0 aceleram o UI; o Imagcon fornece o pacote de ícones que o código referencia.
Valide instalação PWA e ícones
Chrome DevTools
- 1.Abra o app no Chrome
- 2.DevTools → Application
- 3.Manifest no painel esquerdo
- 4.Confira ícones sem erro 404
- 5.Veja se “Adicionar à tela inicial” aparece
Lighthouse (PWA)
- 1.DevTools → Lighthouse
- 2.Marque Progressive Web App
- 3.Analise o carregamento
- 4.Corrija itens vermelhos ligados a ícones
Problemas comuns
Problema: Ícones não aparecem em Application → Manifest
Solução: Garanta <link rel="manifest" href="/manifest.json"> no <head> do index.html.
Problema: Manifest carrega mas ícones dão 404
Solução: Os paths devem refletir a URL pública: arquivos em /public/icons/ viram /icons/... no manifest.
Problema: Lighthouse diz que não é instalável
Solução: É obrigatório ter 192×192 e 512×512; use display "standalone" ou "fullscreen".
Problema: Apple touch icon não funciona no iOS
Solução: Adicione <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">.