Générateur de favicon, gratuit

Importez une image et générez toutes les tailles standard de favicon en PNG.

Glissez-déposez une image ici, ou cliquez pour sélectionner

Les images carrées donnent les meilleurs résultats (PNG, JPG, SVG)

Explication des tailles de favicon

16×16 · favicon d'onglet de navigateur standard

32×32 · onglet Retina, raccourci de barre des tâches

48×48 · raccourci de site Windows

180×180 · Apple Touch Icon (écran d'accueil iOS)

192×192 · Android Chrome, icône de manifest PWA

512×512 · écran de démarrage PWA, recherche Google

Une brève histoire du favicon

Le favicon est né comme une fonctionnalité Microsoft dans Internet Explorer 5, sorti en mars 1999. Microsoft a introduit la convention de chercher /favicon.ico à la racine du site et de l'afficher à côté des sites en favori dans la barre Favoris, d'où le nom « favicon » (favorite icon). Le choix d'origine fut le format propriétaire ICO de Windows, capable de contenir plusieurs tailles bitmap dans un même fichier. Les autres navigateurs ont adopté la convention presque immédiatement et ont aussi pris en charge les favicons PNG, signalés par des balises <link rel="icon"> dans l'en-tête du document. L'iPhone d'Apple (lancé en 2007) a ajouté la convention apple-touch-icon, un PNG 180×180 utilisé quand l'utilisateur ajoute un site à l'écran d'accueil iOS, affiché à la même taille qu'une icône d'application native. Les Progressive Web Apps (PWA, formalisées vers 2015) ont ajouté le fichier manifest.json avec son tableau icons, exigeant des variantes 192×192 (invite d'installation Chrome) et 512×512 (écrans de démarrage PWA, écrans d'accueil Android, épinglage au menu Démarrer Windows). Les favicons SVG (pris en charge dans Firefox depuis la version 41 en 2015, Chrome depuis la version 80 en février 2020, Safari depuis la version 12.1 en 2019) sont aujourd'hui la recommandation moderne quand l'icône est une forme simple, un seul fichier s'adapte parfaitement à n'importe quelle densité d'écran. Le fichier favicon.ico historique reste nécessaire pour Internet Explorer 11 et les navigateurs plus anciens ; les piles modernes livrent le SVG plus un ICO de repli et un PNG apple-touch-icon.

Pourquoi tant de tailles ?

Chaque taille du jeu de favicon sert un contexte de rendu différent. 16×16 est le favicon classique d'onglet de navigateur en DPI standard, la taille qui a appris aux designers à quel point les contraintes de pixels peuvent être brutales. 32×32 est la taille d'onglet en haute DPI (Retina) ; beaucoup de navigateurs modernes la préfèrent même pour les écrans « standards », parce qu'elle se réduit mieux que 16×16 ne s'agrandit. 48×48 est la taille utilisée par Windows pour les raccourcis de la barre des tâches et les sites épinglés. 180×180 est l'apple-touch-icon, affiché quand l'utilisateur ajoute un site à l'écran d'accueil iOS. 192×192 est l'invite d'installation des web apps Chrome et l'icône standard de l'écran d'accueil Android. 512×512 est l'icône d'écran de démarrage PWA, la vignette des résultats Google et l'icône des tuiles du menu Démarrer Windows. Pourquoi un seul fichier haute résolution ne suffit pas : aux plus petites tailles, l'icône a souvent besoin d'une simplification réglée à la main pour rester lisible (un logo complexe à 16×16 devient une tache colorée), si bien que la conception professionnelle de favicons implique typiquement deux ou trois variantes, une version détaillée pour les grandes tailles, une version simplifiée pour les moyennes, et une version « marque seule » pour les plus petites. Ce générateur redimensionne une seule source via un sous-échantillonnage par plus-proche-voisin ou bilinéaire, ce qui convient aux formes simples ; les logos complexes peuvent demander une retouche manuelle aux plus petites tailles.

Le HTML qui accompagne les fichiers

Générer les fichiers ne fait que la moitié du travail ; l'autre moitié, ce sont les balises meta dans votre <head> qui indiquent au navigateur quel fichier utiliser dans quel contexte. La pile favicon minimale viable en 2026 :

<link rel="icon" type="image/svg+xml" href="/icon.svg">
<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">
<link rel="manifest" href="/site.webmanifest">

Le navigateur choisit le fichier le plus approprié selon la densité de pixels de l'appareil et les formats qu'il prend en charge. Les navigateurs modernes préfèrent le SVG quand il est présent ; les anciens reviennent aux tailles PNG ; iOS utilise l'apple-touch-icon ; l'installation PWA lit le manifeste. Le favicon.ico à la racine est toujours récupéré automatiquement comme repli par défaut, même sans balise link explicite, chaque site devrait toujours en avoir un pour la rétrocompatibilité avec les très vieux navigateurs et outils.

Quand vous avez vraiment besoin de générer des favicons

Concevoir pour la contrainte 16×16

Le favicon 16×16 est la contrainte la plus exigeante de la conception d'interface moderne. 256 pixels (toute la toile de l'icône) doivent transmettre assez d'identité de marque pour que l'utilisateur retrouve votre onglet parmi vingt autres. Les conseils pratiques de designers qui l'ont fait souvent : Simplifiez agressivement. Un logo complexe en 16×16 est une tache colorée. Retirez les détails jusqu'à ne garder que la forme minimale reconnaissable. Maximisez le contraste avec les fonds d'onglet. Les onglets de navigateur sont typiquement gris clair ou gris foncé ; une icône au contraste faible disparaît dans le chrome. Préférez des formes pleines et marquées aux fines lignes. Les lignes de moins de 2 px de large s'aliassent en gris à 16 px et deviennent invisibles. Testez à la taille réelle dans votre navigateur. Ce qui semble bien dans votre outil de design en 256×256 peut être illisible en 16×16. Ouvrez plusieurs onglets de votre site et regardez-les dans la barre d'onglets, c'est le vrai test. Pensez au cas du mode sombre. Une icône conçue pour une barre d'onglets blanche peut être invisible sur une barre d'onglets sombre. Les favicons SVG peuvent inclure une media query prefers-color-scheme à l'intérieur du SVG pour adapter automatiquement clair/sombre ; pour les replis ICO et PNG, dessinez quelque chose qui fonctionne sur les deux fonds.

Ce que ce générateur produit

Confidentialité : traitement d'image uniquement dans le navigateur

Un logo ou une image de marque que vous téléversez pour générer un favicon peut être confidentiel, travail de marque pré-lancement, charte d'outil interne, logos clients sous NDA. Les générateurs de favicons côté serveur (le très populaire RealFaviconGenerator et similaires) prennent une copie de chaque image téléversée dans leur infrastructure, où elle reste dans les journaux et les caches. Ce générateur s'exécute entièrement dans votre navigateur via l'API Canvas : l'image est lue par le navigateur, redimensionnée à chaque taille de favicon par le pipeline de redimensionnement intégré, puis empaquetée pour le téléchargement, tout ça dans votre onglet. Vérifiez dans l'onglet Réseau des DevTools pendant le téléversement (aucune requête ne part après le chargement de la page), ou mettez la page hors ligne (mode avion) après chargement et le générateur fonctionne toujours sur les fichiers locaux. Sûr pour le travail de marque non annoncé, les logos clients sous NDA, la charte d'outil interne ou toute image que vous ne voudriez pas voir copiée sur le disque dur d'un inconnu.

Outils associés

Compresseur d'image

Compressez vos images jusqu'à 80 % plus petites. Glisser-déposer, téléchargement instantané. Aucun envoi au serveur.

Redimensionneur d'image

Redimensionnez vos images à des dimensions exactes en pixels. Préréglages pour réseaux sociaux, web et plus.

Convertisseur d'image

Convertissez entre PNG, JPEG et WebP. Conversion par lot de plusieurs fichiers à la fois.