Favicon : définition, tailles, formats et installation

Le favicon est la petite icône qui identifie votre site dans les onglets, les favoris et les résultats Google. Tailles et formats actuels, règles de Google, code à intégrer et conseils pour le dessiner.

Un favicon est la petite icône qui représente un site web dans l’onglet du navigateur, les favoris, l’historique, les raccourcis sur l’écran d’accueil d’un smartphone et les résultats de recherche Google. Ce n’est plus une simple image de 16 x 16 pixels : un site bien équipé fournit aujourd’hui un petit jeu de fichiers (ICO, SVG, PNG 180 px pour Apple, PNG 192 et 512 px pour les applications web) pour être net sur tous les écrans.

On voit ici où apparaît le favicon, pourquoi il compte pour votre image et votre visibilité dans Google, quelles tailles et quels formats utiliser en 2026, le code à intégrer, et comment dessiner une icône lisible à très petite taille.

Qu’est-ce qu’un favicon ?
Où voit-on le favicon ?
Pourquoi un favicon est-il important ?
Le favicon a-t-il un effet sur le référencement ?
Quelles tailles de favicon prévoir ?
Quels formats utiliser ?
Comment installer un favicon sur son site ?
Comment créer un bon favicon ?
Questions fréquentes
Sources

Qu’est-ce qu’un favicon ?

Le mot vient de l’anglais « favorite icon », l’icône des favoris. C’est un petit visuel carré, déclaré dans le code de vos pages, que le navigateur affiche à côté du titre de votre site. Son rôle principal : permettre à un visiteur de retrouver votre site d’un coup d’œil quand il a dix onglets ouverts ou une longue liste de favoris.

Un favicon n’est pas un logo, même s’il en découle presque toujours. À quelques pixels de côté, un logo complet avec son nom et sa signature devient illisible. Le favicon reprend donc un élément du logo : le symbole seul, une initiale, un monogramme d’un à trois caractères dans la typographie de la marque, ou une forme simplifiée. Quand l’identité visuelle est bien conçue, cette déclinaison est prévue dès le départ.

Où voit-on le favicon ?

Les onglets du navigateur, à gauche du titre de la page.
Les favoris et la barre de favoris.
L’historique et les suggestions de la barre d’adresse.
L’écran d’accueil du smartphone, quand un visiteur ajoute votre site en raccourci (icône Apple sur iPhone et iPad, icône du manifeste sur Android).
Les résultats de recherche Google, à côté du nom et de l’adresse du site.
Les applications web installables (PWA), où il sert d’icône d’application.

Pourquoi un favicon est-il important ?

C’est un détail, mais un détail qui se voit. Un site sans favicon affiche une icône générique grise dans l’onglet : l’impression immédiate est celle d’un site inachevé ou négligé. Un favicon soigné produit l’effet inverse :

Repérage : le visiteur retrouve votre onglet ou votre favori sans lire le texte.
Cohérence de marque : l’icône prolonge votre identité visuelle partout où votre site apparaît.
Confiance : dans une liste de résultats, un site dont l’icône est familière et soignée inspire davantage confiance qu’une icône par défaut.

Le favicon a-t-il un effet sur le référencement ?

Pas directement sur le classement : rien dans la documentation de Google n’en fait un critère de positionnement. Son effet est indirect, et il passe par les résultats de recherche. Google affiche le favicon à côté du nom de votre site : une icône reconnaissable rend votre résultat plus visible et peut aider l’internaute à choisir votre lien plutôt qu’un autre. À l’inverse, un favicon absent ou non conforme est remplacé par une icône par défaut.

Google fixe des règles précises pour afficher votre favicon :

le favicon doit être carré (rapport 1:1) et mesurer au moins 8 x 8 pixels, Google recommandant plus de 48 x 48 pixels pour qu’il soit net partout ;
il est déclaré par une balise <link> dans l’en-tête de la page d’accueil, avec un attribut rel reconnu (icon, apple-touch-icon…) ;
le fichier et la page d’accueil doivent être accessibles aux robots Googlebot et Googlebot-Image (non bloqués par le robots.txt) ;
le fichier doit être dans un format pris en charge par Google Search : BMP, GIF, ICO, PNG, JPEG, PPM ou TIFF. Le SVG ne figure pas dans cette liste, d’où l’intérêt de toujours fournir aussi un ICO ou un PNG ;
l’adresse du fichier doit rester stable : évitez de la changer souvent ;
il doit représenter visuellement votre marque, et Google remplace par une icône par défaut tout favicon jugé inapproprié ;
Google prend en charge un favicon par nom d’hôte : www.exemple.fr et boutique.exemple.fr peuvent avoir chacun le leur.

Après un changement de favicon, il faut attendre que Google explore à nouveau votre page d’accueil, ce qui peut prendre de quelques jours à plusieurs semaines selon Google. Vous pouvez demander l’indexation de la page d’accueil avec l’outil d’inspection d’URL de la Search Console.

Quelles tailles de favicon prévoir ?

Les anciennes listes de dix ou quinze tailles (Internet Explorer 9, Google TV, anciens iPhone…) sont périmées. Pour un site actuel, ce petit ensemble couvre l’essentiel des besoins :

Fichier	Taille	Usage
favicon.ico	32 x 32 px	Compatibilité maximale, anciens navigateurs et outils qui cherchent /favicon.ico
icon.svg	Vectoriel	Navigateurs récents : net à toutes les tailles, peut s’adapter au mode sombre
apple-touch-icon.png	180 x 180 px	Raccourci sur l’écran d’accueil d’un iPhone ou d’un iPad
icon-192.png	192 x 192 px	Manifeste d’application web (Android, PWA)
icon-512.png	512 x 512 px	Manifeste d’application web, écran de démarrage des PWA

Les icônes de 192 et 512 pixels ne sont indispensables que si votre site est une application web installable : Chrome les exige dans le manifeste pour proposer l’installation. Pour un site vitrine, les trois premiers fichiers suffisent, mais les deux autres ne coûtent rien à ajouter. Pour les dimensions d’un logo dans le reste du site, voyez notre article sur la meilleure taille de logo.

Quels formats utiliser ?

ICO : le format historique de Windows. Il peut contenir plusieurs résolutions dans un seul fichier. C’est la valeur sûre pour la compatibilité, et beaucoup d’outils demandent encore /favicon.ico à la racine du site même sans balise.
SVG : format vectoriel, net à toutes les tailles et très léger. Il est pris en charge par Chrome et Edge depuis la version 80, Firefox depuis la version 41 et Safari depuis la version 26, selon Can I Use. Il peut contenir une règle CSS prefers-color-scheme pour changer de couleur quand l’utilisateur est en mode sombre. Attention : il ne fait pas partie des formats retenus par Google pour les résultats de recherche, il vient donc en complément d’un ICO ou d’un PNG, jamais seul.
PNG : utilisé pour l’icône Apple et les icônes du manifeste. Il gère la transparence.
GIF, JPEG, PNG animé : à éviter. Le JPEG ne gère pas la transparence et se dégrade à petite taille, et une icône animée dans un onglet distrait plus qu’elle ne sert.

Les formats de votre logo source (vectoriel, PNG, etc.) sont détaillés dans notre article sur les formats de fichiers de logo. Partez toujours d’un fichier vectoriel pour produire vos favicons.

Comment installer un favicon sur son site ?

Sur un site codé à la main

Placez les fichiers à la racine du site et ajoutez ces lignes dans la balise <head> de toutes vos pages (au minimum la page d’accueil pour Google) :

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

La dernière ligne ne sert que si vous avez un manifeste d’application web, qui liste alors les icônes de 192 et 512 pixels.

Sur WordPress

Pas besoin de toucher au code : WordPress gère le favicon sous le nom « Icône du site ». Dans les versions récentes, le réglage se trouve dans Réglages, puis Général (selon votre thème, il peut aussi apparaître dans l’outil de personnalisation ou l’éditeur de site). WordPress demande une image carrée d’au moins 512 x 512 pixels et génère lui-même les déclinaisons utiles (32, 180 et 192 pixels notamment, dont l’icône Apple). Shopify, Wix et les autres CMS proposent un réglage équivalent dans leurs paramètres de thème.

Vérifier le résultat

Ouvrez votre site dans une fenêtre de navigation privée : les navigateurs gardent longtemps l’ancien favicon en cache.
Ouvrez directement l’adresse du fichier (par exemple /favicon.ico) pour vérifier qu’il répond bien.
Vérifiez que le robots.txt ne bloque pas le dossier qui contient les icônes.
Testez l’ajout à l’écran d’accueil sur un iPhone et un téléphone Android.

Comment créer un bon favicon ?

Bien que minuscule, le favicon doit être pensé comme un élément d’identité à part entière. Voici les principes qu’on applique :

Simplifier : une forme, une initiale ou un symbole. Les détails fins, les dégradés subtils et les textes longs disparaissent à 16 pixels.
Tester à la taille réelle : dessinez en grand, mais jugez le résultat à 16 et 32 pixels, dans un onglet réel. C’est souvent là qu’on retouche l’épaisseur des traits.
Soigner le contraste : l’icône doit rester lisible sur un onglet clair comme sur un onglet sombre. Un fond plein ou un léger contour aide souvent.
Utiliser l’espace : remplissez le carré, sans marges excessives qui rapetissent le symbole. Pour l’icône Apple, une marge d’environ 20 pixels et une couleur de fond donnent un meilleur rendu sur l’écran d’accueil.
Rester fidèle à la marque : mêmes couleurs, même typographie ou même symbole que le logo, pour que le lien soit immédiat.

Un favicon réussi découle d’un logo bien construit, avec un symbole capable de vivre seul. Si votre logo n’a pas de déclinaison courte, c’est souvent le signe que l’identité visuelle mérite d’être retravaillée. Nos créations d’identité visuelle incluent ces déclinaisons, favicon compris (le budget d’une création de logo dépend du projet, voir nos tarifs indicatifs).

Questions fréquentes

Quelle est la taille idéale d’un favicon ?

Il n’y a plus une taille unique. Prévoyez un ICO de 32 x 32 px, un SVG, une icône Apple de 180 x 180 px et, pour une application web, des PNG de 192 et 512 px. Pour Google, le favicon doit être carré et, idéalement, dépasser 48 x 48 px.

Pourquoi mon favicon ne s’affiche-t-il pas dans Google ?

Les causes courantes : icône non carrée, balise absente de la page d’accueil, fichier bloqué par le robots.txt, format non pris en charge (un SVG seul, par exemple), ou simplement Google qui n’a pas encore réexploré la page, ce qui peut prendre de quelques jours à plusieurs semaines.

Mon nouveau favicon n’apparaît pas dans mon navigateur, que faire ?

C’est presque toujours le cache. Testez en navigation privée ou dans un autre navigateur. Si le problème persiste, vérifiez l’adresse du fichier dans le code source de la page.

Peut-on utiliser un favicon animé ?

Certains navigateurs l’acceptent, mais c’est déconseillé : l’animation distrait l’utilisateur pendant qu’il travaille dans ses autres onglets, et l’icône perd son rôle de repère stable.

Le favicon doit-il être identique au logo ?

Il doit en être reconnaissable, pas identique. On utilise en général le symbole ou l’initiale du logo, simplifié pour rester lisible à très petite taille.