Favicon Generator: Créer ICO et PNG

Qu'est-ce que Favicon Generator ?

Favicon Generator est un outil gratuit fonctionnant dans le navigateur qui prend n'importe quelle image et produit les neuf tailles standard de favicon requises par les navigateurs modernes, les systèmes d'exploitation et les plateformes mobiles. Configurer des favicons pour un nouveau site web implique de générer un ensemble spécifique de fichiers PNG aux dimensions exactes en pixels — 16×16 pour les onglets du navigateur, 180×180 pour les icônes Apple Touch, 192×192 et 512×512 pour Android Chrome — ainsi que plusieurs tailles intermédiaires. Le faire manuellement nécessite de redimensionner dans un éditeur d'images neuf fois. Cet outil fait les neuf en un clic, affiche un aperçu étiqueté de chaque taille et permet de les télécharger individuellement ou toutes à la fois. Tout s'exécute dans votre navigateur via la Canvas API — aucune image ne quitte votre appareil.

Fonctionnalités principales

• Générer plusieurs tailles de favicon — Produit les 9 tailles définies dans le tableau FAVICON_SIZES : 16, 32, 48, 64, 96, 128, 180, 192 et 512 pixels carrés. Chacune est rendue en dessinant l'image originale sur un canvas aux dimensions cibles.
• Créer des formats ICO, PNG et WebP — Tous les favicons générés sont des PNG (via canvas.toDataURL('image/png')). Les noms de fichiers individuels suivent les standards web : favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, etc.
• Prise en charge de l'Apple Touch Icon — La sortie 180×180px est nommée apple-touch-icon.png, le nom de fichier recherché par iOS Safari lorsqu'un utilisateur ajoute un site à son écran d'accueil.
• Prise en charge des icônes Android Chrome — La sortie 192×192px est nommée android-chrome-192x192.png et la sortie 512×512px est nommée android-chrome-512x512.png, correspondant aux noms spécifiés dans un manifest.json standard du Web App Manifest.
• Aperçu de toutes les tailles générées — Après la génération, une grille affiche chaque taille avec un aperçu étiqueté sur fond de grille de transparence, le nom de fichier, les dimensions exactes en pixels et une description du cas d'utilisation (ex., "Icône d'onglet navigateur", "Apple Touch Icon", "Icône du Chrome Web Store").
• Téléchargement individuel ou tout en ZIP — Chaque taille possède son propre bouton de téléchargement. Le bouton "Tout télécharger" regroupe tous les fichiers générés — 9 PNG de favicons, un favicon.ico (contenant les tailles 16, 32 et 48px) et un site.webmanifest — dans un unique fichier favicons.zip.
• Génération automatique de favicon.ico — L'outil crée un fichier conteneur ICO approprié intégrant les PNG 16, 32 et 48px via la technique PNG-dans-ICO, prêt pour <link rel="icon" type="image/x-icon" href="/favicon.ico">.
• Génération de site.webmanifest — Un fichier Web App Manifest prêt à l'emploi référençant les icônes Android Chrome 192 et 512px est inclus dans l'archive ZIP de téléchargement total.
• Traitement 100% côté client — Les opérations de redimensionnement du canvas s'exécutent entièrement dans votre navigateur. Votre image source est lue via FileReader et n'est jamais transmise à aucun serveur.
• Fonctionne avec n'importe quel format d'image — L'entrée de fichier accepte image/*, et l'élément <img> décode le fichier. JPEG, PNG, SVG, WebP, GIF et AVIF fonctionnent comme images sources.

Comment utiliser Favicon Generator

Étape 1 : Téléverser l'image source

Cliquez sur la zone de dépôt ou faites glisser votre image dessus. Pour de meilleurs résultats, utilisez une image carrée — l'outil met votre image à l'échelle pour remplir chaque canvas de favicon via ctx.drawImage(originalImage, 0, 0, size, size), ce qui étire les entrées non carrées. Un PNG carré de 512×512px ou plus grand avec fond transparent est la source idéale. Après le chargement de l'image, un aperçu indiquant les dimensions originales (ex., 512 x 512px) apparaît.

Étape 2 : Générer toutes les tailles

Cliquez sur "Générer les favicons". L'outil itère à travers les 9 tailles en séquence : pour chaque taille, il définit le canvas masqué à cette dimension, le vide, dessine votre image mise à l'échelle pour remplir le canvas et stocke l'URL de données résultante. Une fois la boucle terminée, un toast de succès confirme que toutes les tailles ont été générées.

Étape 3 : Aperçu des résultats

Une grille apparaît montrant les 9 favicons générés côte à côte. Chaque élément affiche :

• Une image d'aperçu rendue sur fond de grille de transparence (l'aperçu est limité à 64×64px même pour les grandes sorties comme 512×512)
• Le nom de fichier (ex., android-chrome-512x512.png)
• Les dimensions exactes en pixels (ex., 512x512px)
• Une description de l'endroit où il est utilisé (ex., Splash Android Chrome)

Cela permet de confirmer visuellement que l'icône est correct aux petites tailles comme 16×16 avant de télécharger.

Étape 4 : Téléchargement individuel ou tout en ZIP

Cliquez sur le bouton de téléchargement à côté d'un favicon individuel pour sauvegarder ce fichier spécifique. Vous pouvez également télécharger le favicon.ico séparément — il contient les tailles 16, 32 et 48px dans un unique conteneur ICO. Pour tout télécharger à la fois, cliquez sur "Tout télécharger" dans l'en-tête de la carte des favicons générés. Cela crée un fichier favicons.zip contenant les 9 fichiers PNG, le favicon.ico et un fichier site.webmanifest.

Étape 5 : Ajouter les favicons à votre site web

Placez les fichiers PNG téléchargés dans le répertoire racine public de votre projet. Ajoutez les balises suivantes dans le <head> de votre HTML :

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Pour la prise en charge PWA Android Chrome, référencez les fichiers 192×192 et 512×512 dans votre manifest.json :

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Exemples pratiques

Configuration d'un nouveau site web

Scénario : Vous lancez un site portfolio personnel développé avec Next.js et avez besoin de toutes les tailles standard de favicon depuis votre SVG de logo.

Entrée : Un export PNG carré 512×512px de votre logo (fond transparent).

Ce que l'outil produit : Neuf fichiers PNG : de favicon-16x16.png à android-chrome-512x512.png, tous nommés et dimensionnés selon les attentes des navigateurs et des plateformes mobiles.

Pourquoi c'est utile : Configurer des favicons manuellement nécessite 9 opérations d'export séparées. Un clic ici remplace toute cette étape.

Icône du Chrome Web Store

Scénario : Vous soumettez une extension Chrome et avez besoin d'une icône 128×128px selon les directives de liste du Chrome Web Store.

Entrée : L'artwork de l'icône de votre extension à n'importe quelle taille.

Ce que l'outil produit : favicon-128x128.png étiqueté "Icône Chrome Web Store" — exactement le fichier requis par le Chrome Web Store.

Pourquoi c'est utile : La taille 128×128px est une exigence spécifique que de nombreux générateurs de favicons omettent. Cet outil l'inclut avec le nom de fichier standard correct.

Configuration PWA pour une application web

Scénario : Vous ajoutez la prise en charge Progressive Web App (PWA) à une app React et avez besoin des icônes du manifest.

Entrée : Un PNG d'icône d'app 512×512px.

Ce que l'outil produit : android-chrome-192x192.png (192×192px) et android-chrome-512x512.png (512×512px) — les deux tailles spécifiées dans la spécification du Web App Manifest pour Android Chrome.

Pourquoi c'est utile : Android Chrome nécessite les deux tailles pour l'affichage correct de l'icône sur l'écran d'accueil et l'écran de démarrage. Les avoir pré-nommés avec les noms de fichiers standard évite les erreurs de configuration.

Conseils et bonnes pratiques

Commencez avec une image carrée de 512×512px ou plus grande. L'outil met à l'échelle votre entrée vers chaque taille cible via ctx.drawImage. Partir d'une image carrée plus grande signifie plus de détails disponibles à chaque échelle, réduisant les artefacts aux petites tailles comme 16×16.

Utilisez un PNG transparent comme entrée pour les icônes avec des logos en forme. Si votre logo a une forme non rectangulaire (cercle, bouclier ou contour personnalisé), fournissez un PNG avec fond transparent. Les zones transparentes se reportent sur chaque favicon, ce qui est correct dans les onglets du navigateur et sur les écrans d'accueil iOS.

Vérifiez l'aperçu 16×16 avant de télécharger. La grille montre chaque taille à l'échelle d'affichage. L'aperçu 16×16 est souvent le plus important — si le texte de votre logo est illisible à 16px, envisagez une version simplifiée sans texte pour les plus petites tailles.

La fonction "Tout télécharger" crée une archive ZIP. Tous les fichiers générés — les 9 PNG de favicons, le favicon.ico et le site.webmanifest — sont regroupés dans un unique fichier favicons.zip. Cela évite les limites de téléchargement du navigateur et garde tous les fichiers organisés dans une archive.

L'entrée JPEG fonctionne, mais les zones transparentes deviennent noires. Si votre image source est un JPEG sans transparence, les favicons de sortie auront le même arrière-plan. Pour les icônes nécessitant un fond transparent, fournissez une source PNG.

Vérifiez le comportement de téléchargement de votre navigateur. Certains navigateurs demandent une confirmation pour chaque fichier individuel lors du déclenchement de "Tout télécharger". Si vous voyez 9 demandes de téléchargement, acceptez-les. Dans Chrome avec téléchargement automatique activé, les 9 fichiers arrivent dans votre dossier de téléchargements sans demande.

Problèmes courants et dépannage

Toast "Erreur de chargement" lors du téléversement. Cela provient du gestionnaire img.onerror quand le navigateur ne peut pas décoder le fichier téléversé en tant qu'image. Assurez-vous de téléverser un fichier image valide (JPEG, PNG, WebP, SVG, etc.). Les fichiers corrompus ou avec des extensions incorrectes déclencheront cette erreur.

Les favicons générés semblent flous à 16×16. L'outil dessine l'image source complète mise à l'échelle à 16×16 pixels via l'interpolation bilinéaire (le comportement par défaut du navigateur). Si votre source est une illustration détaillée ou contient du texte, le résultat à 16×16 sera flou. C'est une limitation fondamentale de la mise à l'échelle d'œuvres complexes à de petites tailles — concevez une marque simplifiée pour les cibles 16×16 et 32×32.

"Tout télécharger" ne démarre pas. La fonction Tout télécharger crée une archive ZIP via JavaScript. Si le téléchargement ne se déclenche pas, vérifiez que les fenêtres contextuelles et les téléchargements sont autorisés pour le site. Vous pouvez aussi télécharger les fichiers individuels un par un via leurs boutons respectifs.

Les favicons ne se mettent pas à jour dans le navigateur après le déploiement. La mise en cache des favicons dans le navigateur est agressive. Après avoir déployé de nouveaux favicons, forcez le rechargement de l'onglet (Ctrl+Shift+R ou Cmd+Shift+R sur Mac) ou videz le cache du navigateur. Modifier le nom du fichier favicon avec une chaîne de requête cache-busting (ex., href="/favicon-32x32.png?v=2") force également la mise à jour.

L'image d'aperçu 512×512 dans la grille est limitée à 64px. L'aperçu de la grille limite l'affichage à Math.min(size, 64) pixels pour garder la grille compacte. Le fichier téléchargé est le PNG correct de 512×512px — la petite taille d'affichage concerne uniquement l'aperçu.

Confidentialité et sécurité

Favicon Generator s'exécute entièrement dans votre navigateur. Votre image source est chargée dans un objet Image JavaScript via FileReader.readAsDataURL, puis dessinée sur un élément canvas masqué. Aucune donnée d'image n'est envoyée à un serveur externe. Les neuf favicons de sortie sont générés localement depuis canvas.toDataURL('image/png'). C'est sûr pour les logos propriétaires, les identités visuelles non publiées et les actifs visuels confidentiels. L'outil fonctionne entièrement hors ligne une fois la page chargée.

Questions fréquentes

Favicon Generator est-il gratuit ?

Oui, entièrement gratuit. Aucun compte n'est requis, aucun filigrane n'est ajouté aux sorties et il n'y a pas de limite sur le nombre de générations de favicons. La Canvas API utilisée pour le traitement n'a aucun coût côté serveur.

Favicon Generator fonctionne-t-il hors ligne ?

Oui. Après le chargement de la page, tout le traitement utilise la Canvas API native du navigateur et FileReader. Aucun appel réseau n'est effectué lors du chargement d'images, de la génération de favicons ou du téléchargement. Il fonctionne sans connexion internet.

Mes données sont-elles en sécurité avec Favicon Generator ?

Oui. Votre image est lue via FileReader dans la mémoire du navigateur et dessinée sur un élément canvas. Aucune donnée d'image ne quitte votre navigateur. C'est sûr pour les logos non publiés, les actifs de marque confidentiels et l'iconographie propriétaire.

Quelles tailles l'outil génère-t-il ?

L'outil génère 9 tailles : 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 180×180, 192×192 et 512×512 pixels. Chacune est sauvegardée en PNG avec le nom de fichier standard pour son cas d'utilisation.

Quels sont les noms de fichiers standard pour chaque taille ?

Les noms de fichiers respectent les standards web : favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-64x64.png, favicon-96x96.png, favicon-128x128.png, apple-touch-icon.png (180×180), android-chrome-192x192.png et android-chrome-512x512.png.

L'outil génère-t-il un fichier .ico ?

Oui. L'outil génère automatiquement un fichier favicon.ico contenant les tailles 16, 32 et 48px intégrées en tant que PNG dans un conteneur ICO. Il est prêt au déploiement avec <link rel="icon" type="image/x-icon" href="/favicon.ico">. Le fichier ICO peut être téléchargé individuellement ou est inclus dans l'archive ZIP "Tout télécharger".

À quoi sert la taille 96×96 ?

Le favicon-96x96.png de 96×96 est étiqueté "Icône Google TV" dans le tableau de description de l'outil. Il était historiquement utilisé pour les icônes d'applications Google TV et est inclus par souci d'exhaustivité dans un package de favicons complet.

Puis-je utiliser un SVG comme image source ?

Oui. L'entrée de fichier accepte image/* et les navigateurs modernes peuvent décoder SVG via l'élément <img>. Le SVG est rastérisé par le navigateur lorsqu'il est dessiné sur le canvas. La sortie sera un PNG rastérisé — pas un favicon SVG vectoriel — ce qui convient à la plupart des cas d'utilisation.

Dois-je utiliser un fond transparent dans mon image source ?

Oui, si votre icône a un contour en forme. Les fonds transparents se reportent sur la sortie PNG. Pour les icônes placées sur les écrans d'accueil iOS (apple-touch-icon.png), iOS ajoute automatiquement des coins arrondis, donc un fond transparent est correct. Pour les favicons d'onglets de navigateur, le fond de l'onglet du navigateur apparaît à travers les zones transparentes.

Que fait exactement le bouton "Tout télécharger" ?

Il regroupe tous les fichiers générés dans un unique fichier favicons.zip : les 9 PNG de favicons, le favicon.ico (contenant les tailles 16, 32 et 48px) et un fichier site.webmanifest. Le ZIP est généré dans votre navigateur et téléchargé en un seul fichier.

Outils associés

• Bientôt disponible: SVG vers PNG — Convertissez votre logo SVG en PNG haute résolution avant de l'utiliser dans Favicon Generator.
• Bientôt disponible: Redimensionneur d'images — Redimensionnez votre artwork source en carré 512×512px avant de générer des favicons pour un rendu optimal.
• Bientôt disponible: Générateur de placeholders — Générez des images de remplacement en attendant la livraison des actifs de marque finaux.
• Bientôt disponible: Convertisseur d'images — Convertissez les PNG de favicons générés en WebP ou autres formats si votre déploiement le nécessite.

Essayez Favicon Generator maintenant : Bientôt disponible: Glyph Widgets Favicon Generator