Comment créer un favicon à partir d'une image (ou d'une lettre) — générateur gratuit en ligne

Utilisez un générateur de favicon gratuit en ligne pour créer un favicon à partir d'une image ou d'une lettre/emoji. Obtenez toutes les tailles (16, 32, 180, 192, 512), un favicon.ico multi-tailles, un manifeste et un extrait HTML — le tout dans votre navigateur.

Un favicon est la minuscule icône qui apparaît dans votre onglet de navigateur, votre barre de favoris, l'écran d'accueil de votre téléphone quand quelqu'un enregistre votre site, et de plus en plus dans les résultats de recherche à côté de votre domaine. C'est l'un des plus petits éléments d'un site web et l'un des plus disproportionnellement importants : un site sans favicon paraît inachevé, tandis qu'un favicon net et reconnaissable donne à une marque une impression de soin dès le tout premier pixel. Le problème, c'est qu'obtenir de bons favicons était autrefois inutilement pénible — et c'est exactement ce qu'un bon générateur de favicon en ligne corrige.

Pourquoi un seul favicon ne suffit jamais

Aux débuts du web, vous déposiez un unique favicon.icodans votre répertoire racine et c'était terminé. Aujourd'hui, les navigateurs, les systèmes d'exploitation et les lanceurs d'applications veulent tous des tailles différentes pour des contextes différents. Une icône 16×16 s'affiche dans l'onglet du navigateur. Une 32×32 sert aux écrans à haute densité et à la barre des tâches Windows. Les appareils Apple veulent un apple-touch-icon.pngde 180×180 pour l'écran d'accueil. Android et les applications web progressives référencent des PNG 192×192 et 512×512 depuis un manifeste web. Oubliez-en un et votre icône paraît floue, pixelisée ou simplement absente dans ce contexte.

Produire toutes ces tailles à la main dans un éditeur d'images est fastidieux et source d'erreurs. Vous devez redimensionner chacune, l'exporter aux bonnes dimensions en pixels, nommer les fichiers exactement comme il faut, puis écrire le HTML qui les relie tous. Notre outil fait l'ensemble en un clic, entièrement dans votre navigateur.

Créer un favicon à partir d'une image

Le flux le plus courant consiste à créer un favicon à partir d'une image— généralement un logo ou une icône d'application. Glissez un PNG, JPG, WebP, SVG ou GIF dans la zone de téléversement. L'outil dessine votre image sur un canevas carré en utilisant un ajustement par recouvrement (de sorte que les images non carrées sont centrées et recadrées plutôt qu'écrasées), puis la redimensionne à chaque taille de l'ensemble standard. Comme les favicons s'affichent très petits, une image source propre, à fort contraste et idéalement carrée donne les meilleurs résultats. Les détails fins et le petit texte ont tendance à disparaître en 16×16, donc les marques plus simples se lisent bien mieux.

Ou générer un favicon à partir d'une lettre ou d'un emoji

Tout le monde n'a pas un logo prêt — et vous n'en avez pas besoin. Passez en mode lettre/emoji, tapez un seul caractère (une initiale de marque comme « B », ou un emoji comme 🚀), choisissez une couleur d'arrière-plan et une couleur de texte, et l'outil rend un glyphe propre et centré à chaque taille. C'est parfait pour les projets personnels, les outils internes, les sites de documentation et les prototypes rapides. Vous obtenez un favicon distinctif et conforme à la marque sans jamais ouvrir une application de conception.

Ce que vous téléchargez réellement

Lorsque vous cliquez sur télécharger, l'outil regroupe un paquet complet et prêt pour la production dans un seul fichier ZIP :

Icônes PNGen 16×16, 32×32, 48×48, 180×180 (l'icône tactile Apple), 192×192 et 512×512.
favicon.ico — un véritable fichier ICO multi-résolution contenant à la fois les images 16×16 et 32×32, encodé directement dans votre navigateur pour que les navigateurs anciens et Windows obtiennent toujours une icône correcte.
site.webmanifest— un manifeste d'application web prêt à modifier qui référence les PNG 192 et 512 pour les installations Android et PWA.
L'extrait HTML — les balises <link> exactes que vous collez dans votre <head>, également copiables directement depuis l'outil en un clic.

Comment ajouter des favicons à votre site

L'ajout de favicons se fait en deux étapes. D'abord, décompressez les fichiers téléchargés dans le répertoire racine ou public de votre site (le même endroit où se trouve votre index.html ou le dossier public de votre framework). Ensuite, collez les balises de lien générées dans le <head> de votre HTML :

<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<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" />

Si vous êtes sur Next.js, placez les fichiers dans le répertoire public/et ajoutez soit les balises à votre layout racine, soit appuyez-vous sur l'API de métadonnées du framework. Sur WordPress, la plupart des thèmes disposent d'un réglage d'icône de site qui accepte un seul PNG carré — téléversez-y le 512×512. Pour les sites statiques et les frameworks comme Astro, Vite ou le HTML pur, l'extrait ci-dessus fonctionne tel quel.

Tout s'exécute dans votre navigateur

De nombreux générateurs de favicons téléversent votre logo sur un serveur, le traitent à distance, puis vous l'envoient par e-mail ou vous redirigent vers un téléchargement. Le nôtre ne le fait jamais. L'ensemble du pipeline — décoder votre image, la dessiner sur des canevas, la redimensionner, encoder l'ICO et les PNG, et compresser le résultat — se déroule localement à l'aide du canevas HTML et de la bibliothèque jszipexécutée dans votre onglet. Votre logo ne quitte jamais votre appareil, il n'y a aucun compte à créer, aucun filigrane et aucune limite de téléversement. C'est véritablement gratuit et véritablement privé.

Conseils pour des favicons nets

Commencez avec une source carrée pour que rien ne soit recadré de façon inattendue. Utilisez des formes franches et un fort contraste pour que l'icône reste lisible à 16 pixels. Évitez les lignes fines et le petit texte — ils s'évanouissent aux petites tailles. Si vous utilisez le mode lettre, une couleur d'arrière-plan soutenue avec du texte blanc se lit clairement dans les thèmes de navigateur clairs comme sombres. Et vérifiez toujours votre favicon dans un véritable onglet de navigateur après le déploiement, car rien ne vaut le fait de le voir à sa taille réelle.

Essayez-le maintenant

Ouvrez le générateur de favicon, téléversez un logo ou tapez une lettre, et téléchargez votre jeu de favicons complet en quelques secondes. Tant que vous êtes là, vous aimerez peut-être aussi le redimensionneur d'images, le convertisseur de format d'image, et le générateur de balises Meta— tous gratuits, tous privés, tous s'exécutant entièrement dans votre navigateur.