Image source
Importez un PNG ou SVG pour afficher l’aperçu.
Générateur de favicons et d’icônes PWA
Importez un PNG ou un SVG, prévisualisez vos icônes web et PWA, puis téléchargez le ZIP contenant favicon.ico, les PNG et site.webmanifest.
- Utilisation gratuite
- Sans connexion
- Sources PNG et SVG
- Sorties favicon et PWA
Espace de génération d’icônes
Importez un PNG ou SVG, puis ajustez marges, arrière-plan, manifest, aperçus et téléchargements depuis le panneau principal.
Importer PNG ou SVG
PNG et SVG sont pris en charge. PNG transparent ou SVG statique simple recommandé. Taille minimale conseillée: 512×512.
Déposez votre PNG/SVG ici
ou cliquez pour sélectionner
Paramètres
Importez un PNG ou SVG, puis ajustez marges, arrière-plan, manifest, aperçus et téléchargements depuis le panneau principal.
Mode de marge
Mode de fond
Style des coins en aperçu
Couleur de fond
Paramètres manifest
Téléchargez le pack ZIP complet, le manifest, ou chaque fichier séparément.
Mode d’affichage
Aperçu
Importez un PNG ou SVG pour afficher l’aperçu.
Aperçu
Importez un PNG ou SVG pour afficher l’aperçu.
Zone du sujet détectée
Importez un PNG ou SVG pour afficher l’aperçu.
Aperçu favicon
—
Aperçu Apple
—
Aperçu PWA
—
Aperçu maskable
—
Fichiers de sortie
Fichiers générés automatiquement, téléchargeables individuellement ou en ZIP.
Téléchargement
Téléchargez le pack ZIP complet, le manifest, ou chaque fichier séparément.
Aperçu favicon
4favicon-16x16.png
16×16
favicon-32x32.png
32×32
favicon-48x48.png
48×48
favicon.ico
48×48
Aperçu Apple
1apple-touch-icon.png
180×180
Aperçu PWA
2icon-192x192.png
192×192
icon-512x512.png
512×512
Aperçu maskable
2icon-maskable-192x192.png
192×192
icon-maskable-512x512.png
512×512
Fichiers de sortie
3icon-256x256.png
256×256
icon-1024x1024.png
1024×1024
site.webmanifest
JSON
Paramètres manifest
{
"name": "Toolbye App",
"short_name": "Toolbye",
"theme_color": "#2563eb",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-maskable-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icon-maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}Utiliser le pack téléchargé
Le ZIP contient 10 icônes PNG, favicon.ico et site.webmanifest. Ce sont des ressources web et PWA, pas un projet complet d’application native.
Fichiers inclus dans le ZIP
favicon-16x16.pngfavicon-32x32.pngfavicon-48x48.pngapple-touch-icon.pngicon-192x192.pngicon-512x512.pngicon-maskable-192x192.pngicon-maskable-512x512.pngicon-256x256.pngicon-1024x1024.pngfavicon.icosite.webmanifest
- Décompressez le ZIP et placez les fichiers sur votre site. Cet exemple les regroupe à la racine du site.
- Ajoutez les liens suivants dans le head HTML de vos pages.
- Avant l’export, renseignez le nom, les couleurs et l’URL de démarrage. Gardez site.webmanifest à côté des quatre PNG PWA référencés : leurs chemins sont relatifs au manifeste.
- Ouvrez les URL des icônes et du manifeste pour vérifier leur chargement, puis testez le rendu sur vos appareils cibles. Les icônes seules ne suffisent pas à créer une PWA installable.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Avec un sous-dossier comme /icons/, adaptez les liens HTML et gardez le manifeste avec les PNG. Réglez start_url sur l’entrée réelle de votre application. Le SVG source n’est pas inclus dans le ZIP.
Comment utiliser
- Importez un PNG ou SVG: l’outil détecte automatiquement la zone utile du sujet.
- Choisissez le mode de marge et le fond, puis vérifiez les aperçus.
- Téléchargez le ZIP (PNG, favicon.ico et manifest).
Différence entre favicon, PWA et maskable
Favicon
1Petite icône d’onglet navigateur. Le contour doit rester lisible à très petite taille.
Icône PWA
2Utilisée pour l’installation web app sur l’écran d’accueil.
Icône maskable
3Adaptée aux masques de lanceurs Android; le sujet doit rester dans une zone centrale sûre.
Erreurs fréquentes
Sujet trop proche des bords
Un sujet plein cadre peut être rogné selon la plateforme.
Trop de marge transparente
Une grande zone vide rend l’icône visuellement trop petite.
Mauvais format de fichier
Le service supporte PNG et SVG. Pour un SVG complexe, simplifiez-le ou utilisez PNG.
Source trop petite
Une faible résolution dégrade la netteté en 512/1024.
Les images sont-elles envoyées au serveur ?
Dans cette implémentation, l’analyse, le rendu, le manifest et le ZIP sont traités dans le navigateur.
Aucune API externe dédiée n’est requise pour le flux principal.
Questions fréquentes
Quel format est accepté ?
PNG et SVG. PNG transparent et SVG statique simple sont recommandés.
Pourquoi laisser des marges ?
Pour éviter que le sujet soit coupé sur différents lanceurs/plateformes.
Favicon vs app icon ?
Favicon pour onglets navigateur, app icon pour installation/écran d’accueil.
Qu’est-ce qu’une icône maskable ?
Une icône prévue pour les masques de forme (Android).
Mon image est-elle envoyée ?
Le flux normal est traité localement dans le navigateur.
Quelle taille source recommandez-vous ?
Au moins 512×512, 1024×1024 de préférence.
Pourquoi préférer PNG transparent ?
Le canal alpha aide à détecter correctement les limites du sujet.
Puis-je recolorer une icône SVG ?
Oui. Passez la couleur d’icône en mode personnalisé puis choisissez une couleur preset ou HEX (teinte unie).
Outils associés
Encodage et décodage Base64
Convertissez texte et images vers/depuis Base64.
Formateur JSON
Formatez, minifiez et validez du JSON.
Convertisseur de timestamp
Convertissez rapidement timestamp et date/heure.