Générateur d'icônes PWA par IA pour Cursor, Lovable, Bolt et v0
Les outils IA codent vite, mais ne génèrent pas les PNG prêts pour la production. Imagcon génère depuis un prompt tous les formats PWA, AppIcon.appiconset (Contents.json), mipmaps Android, 16 splash screens iOS et un manifest.json — prêts à intégrer dans votre projet.
Pourquoi Cursor, Lovable, Bolt et v0 ne remplacent pas un générateur d'icônes
Cursor, Lovable, Bolt et v0 excellent dans le scaffolding et la logique — mais ils ne créent pas de vrais fichiers image. Le manifest arrive souvent avec des chemins factices tandis que /icons/ reste vide.
Le flux est simple : générer les fichiers dans Imagcon puis demander à votre IA de câbler les chemins et balises dans le projet.
Avant le ZIP : styles et édition IA dans le workspace
Sept styles dans le modal lors de la génération
Décrivez d'abord l'icône dans le champ (ou utilisez un prompt d'exemple) et cliquez sur **Générer l'image**. Un modal s'ouvre — choisissez Flat, Metallic, 2D Game, Clay, 3D, Gradient ou Glassmorphism (chacun avec une miniature) et confirmez. Le style se combine à votre texte pour guider Imagen.
Affiner avec l'édition par IA
Après la génération, ouvrez l'Éditeur d'image : décrivez la modification en texte (ex. : « supprimer les lunettes », « fine bordure dorée »). Google Gemini sur Vertex AI applique l'ajustement ; les modifications importantes peuvent prendre une à deux minutes. Combinez avec dessin, texte et recadrage, ou régénérez depuis zéro.
Générez vos icônes depuis un prompt dans Imagcon
Accédez à imagcon.app, inscrivez-vous gratuitement et décrivez l'icône en langage naturel — comme vous parleriez à une IA.
Exemples de prompt
- "Dégradé bleu foncé avec un éclair blanc"
- "Feuille verte minimaliste sur fond blanc, style flat"
- "Vague abstraite violette, style SaaS moderne"
Le ZIP contient : les 27 fichiers d'icônes PWA, variantes maskable, 16 splash screens iOS, dossiers mipmap Android, AppIcon.appiconset (Xcode) avec Contents.json et un manifest.json prêt à l'emploi.
Placez les fichiers dans le dossier public du projet
La plupart des stacks exposent /public à la racine du site. Les icônes dans /public/icons/ sont servies comme /icons/ dans le navigateur.
| Stack / outil | Icônes dans | manifest.json dans |
|---|---|---|
| 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 en dessous) | /public/icons/ | /public/manifest.json |
| Projet Cursor (tout framework) | Idem ci-dessus — vérifiez package.json | Idem ci-dessus |
| Bolt / v0 (export Vite/React) | /public/icons/ | /public/manifest.json |
Vérifiez manifest.json
Le téléchargement inclut déjà manifest.json. Si vous le créez manuellement, utilisez ce modèle (ajustez le nom et les couleurs) :
{
"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"
}
]
}Collez un prompt dans votre outil (Cursor, Lovable, Bolt ou v0)
CCursor
Ouvrez le chat IA (Cmd+L / Ctrl+L) et collez :
J'ai téléchargé mes icônes PWA depuis Imagcon. Le ZIP contient :
- dossier /icons/ avec icon-72x72.png jusqu'à icon-512x512.png
- icon-512x512-maskable.png (Android)
- manifest.json prêt à l'emploi
- dossier splash/ avec les images de lancement iOS
- AppIcon.appiconset (Xcode) avec Contents.json
- dossiers mipmap Android
Merci de :
1. Copier /icons/ dans /public/icons/
2. Copier manifest.json dans /public/manifest.json
3. Ajouter <link rel="manifest" href="/manifest.json"> dans le <head> de index.html
4. Ajouter <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> dans index.html
5. Intégrer AppIcon.appiconset et les mipmaps selon le projet iOS/AndroidLLovable
Envoyez les fichiers dans public/icons/ et utilisez le chat :
- 1. Icône de fichiers dans la barre latérale → Envoyer des fichiers
- 2. Créez ou ouvrez public/icons/
- 3. Envoyez tous les PNG du ZIP Imagcon
- 4. Dans le chat Lovable, collez le prompt ci-dessous
J'ai mes fichiers d'icônes PWA prêts (Imagcon). J'ai besoin que vous :
1. Mettiez les PNG dans /public/icons/
2. Configuriez manifest.json pour l'installation PWA
3. Liiez le manifest dans index.html
Le manifest doit référencer /icons/icon-{size}x{size}.png, inclure 192x192 et 512x512 et un maskable 192x192 pour Android.B/vBolt et v0
Après avoir exporté le projet (généralement Vite/React), traitez comme dans Cursor : PNG dans public/icons/, manifest dans public/, et collez :
J'ai exporté l'app depuis Bolt/v0. Intégrez les icônes générées dans Imagcon :
- public/icons/ avec toutes les tailles PWA
- public/manifest.json
- liens dans index.html pour manifest et apple-touch-icon
Gardez les chemins cohérents avec le Vite/React généré.Bolt et v0 accélèrent le développement UI ; Imagcon fournit le paquet d'icônes référencé par le code.
Validez l'installation PWA et les icônes
Chrome DevTools
- 1.Ouvrez l'app dans Chrome
- 2.DevTools → Application
- 3.Manifest dans le panneau gauche
- 4.Vérifiez les icônes sans erreur 404
- 5.Vérifiez "Ajouter à l'écran d'accueil"
Lighthouse (PWA)
- 1.DevTools → Lighthouse
- 2.Cochez Progressive Web App
- 3.Analysez le chargement
- 4.Corrigez les éléments rouges liés aux icônes
Problèmes fréquents
Problème : Les icônes n'apparaissent pas dans Application → Manifest
Solution : Assurez-vous que <link rel="manifest" href="/manifest.json"> est présent dans le <head> de index.html.
Problème : Le manifest se charge mais les icônes renvoient 404
Solution : Les chemins doivent correspondre à l'URL publique : /public/icons/ est servi comme /icons/...
Problème : Lighthouse indique que l'app n'est pas installable
Solution : Les formats 192×192 et 512×512 sont obligatoires ; utilisez display "standalone" ou "fullscreen".
Problème : L'icône Apple touch ne fonctionne pas sur iOS
Solution : Ajoutez <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">.