Quand on parle d’icône de site internet, on désigne presque toujours le favicon — cette petite image qui s’affiche dans l’onglet du navigateur, dans la barre de favoris et parfois sur l’écran d’accueil d’un smartphone. Discret mais omniprésent, le favicon est un élément clé de l’identité visuelle d’un site web. Cet article explique ce qu’il est, quels formats et tailles utiliser, comment l’intégrer techniquement et quelles bonnes pratiques adopter.
Qu’est-ce qu’une icône de site web (favicon) ?
Le terme favicon est la contraction de favorite icon, soit icône de favoris. Il désigne le petit visuel associé à un site web, visible à plusieurs endroits de l’interface utilisateur :
- Dans l’onglet du navigateur, à gauche du titre de la page
- Dans la liste des favoris du navigateur lorsqu’un site est mis en signet
- Dans la barre d’adresse de certains navigateurs
- Sur l’écran d’accueil d’un mobile, quand un utilisateur enregistre un raccourci vers un site
Cette icône web reprend généralement le logo du site internet, ou une version simplifiée adaptée aux petites dimensions. Elle joue un rôle immédiat dans la reconnaissance de la marque : un internaute qui a plusieurs onglets ouverts identifie instantanément un site grâce à son favicon.
Son impact sur le référencement naturel est indirect : Google peut l’afficher dans les résultats de recherche sur mobile (dans le bloc de l’URL), ce qui renforce la perception de légitimité du site.
Formats acceptés pour une icône web : ICO, PNG et SVG
Trois formats sont principalement utilisés pour créer un favicon.
Le format ICO est le format historique du favicon, inventé par Microsoft. Un fichier .ico peut contenir plusieurs tailles d’image dans un seul fichier (16×16, 32×32, 48×48 pixels). Il est reconnu par tous les navigateurs, y compris les plus anciens. C’est encore aujourd’hui le format le plus universel pour assurer une compatibilité maximale.
Le format PNG est aujourd’hui le plus courant pour les favicons modernes. Plus simple à produire qu’un ICO, il offre la transparence et une bonne qualité d’affichage. Les navigateurs récents le supportent sans problème. On l’utilise généralement en plusieurs tailles distinctes pour couvrir les différents contextes d’affichage.
Le format SVG est le plus récent et le plus flexible. Étant vectoriel, il s’adapte à n’importe quelle résolution sans perte de qualité. Il est supporté par Firefox, Chrome et Edge, mais pas encore par tous les environnements (notamment Safari dans ses versions plus anciennes). Il peut être utilisé en complément des autres formats.
| Format | Extension | Transparence | Résolutions multiples | Compatibilité | |—|—|—|—| | ICO | .ico | Oui | Oui (multi-taille) | Universelle | | PNG | .png | Oui | Non (un fichier par taille) | Très bonne | | SVG | .svg | Oui | Vectoriel (infinie) | Partielle |
Tailles de favicon : quelles dimensions prévoir ?
La taille favicon varie selon les contextes d’affichage. Prévoir plusieurs dimensions garantit un rendu optimal sur tous les appareils et systèmes.
Les tailles essentielles à générer sont les suivantes :
- 16×16 px : taille standard pour l’onglet navigateur sur desktop
- 32×32 px : utilisée par certains navigateurs pour un affichage plus net
- 48×48 px : présente dans les fichiers ICO pour Windows
- 180×180 px : icône Apple Touch Icon, utilisée sur iPhone et iPad lorsqu’un raccourci est ajouté à l’écran d’accueil
- 192×192 px : icône Android Chrome, utilisée pour les Progressive Web Apps (PWA)
- 512×512 px : recommandée par Google pour les PWA et les résultats mobiles
Il n’est pas nécessaire de créer toutes ces tailles manuellement. Des outils en ligne spécialisés (générateurs de favicon) permettent de partir d’une image source haute résolution — idéalement le logo site internet en PNG ou SVG — et de générer automatiquement l’ensemble des tailles nécessaires.
Comment ajouter une icône de favoris avec la balise HTML favicon
L’intégration technique d’un favicon se fait via des balises <link> placées dans la section <head> du code HTML. C’est ce qu’on appelle la balise HTML favicon.
Voici les déclarations les plus courantes :
<!-- Favicon classique ICO -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Favicon PNG 32x32 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<!-- Favicon PNG 16x16 -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Favicon SVG -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Pour une compatibilité maximale, il est recommandé de déclarer plusieurs formats et tailles. Le navigateur choisit automatiquement la version la plus adaptée à son contexte d’affichage.
Le fichier favicon.ico placé à la racine du serveur (c’est-à-dire accessible à l’adresse https://monsite.com/favicon.ico) est souvent reconnu automatiquement par les navigateurs, même sans balise HTML explicite. Cela ne dispense pas pour autant d’ajouter les balises pour les autres formats.
Ajouter une icône WordPress sans toucher au code
Pour les sites sous WordPress, l’ajout d’une icône de site se fait sans manipuler le HTML directement. WordPress intègre nativement cette fonctionnalité via le Customizer (personnaliseur de thème).
Le chemin à suivre : Apparence → Personnaliser → Identité du site → Icône du site. Il suffit d’y téléverser une image carrée d’au moins 512×512 pixels. WordPress génère ensuite automatiquement les différentes tailles nécessaires et insère les balises correspondantes dans le <head> du site.
Cette icône WordPress est également appelée « Site Icon » dans l’interface d’administration. Elle est distincte du logo affiché dans l’en-tête du site : l’une sert à l’identification dans le navigateur, l’autre à la communication visuelle sur la page elle-même.
Certains constructeurs de pages (Elementor, Divi, etc.) proposent également leur propre interface pour gérer l’icône de site, mais ils utilisent la même mécanique en arrière-plan.
Bonnes pratiques pour une icône de site efficace
Concevoir un favicon efficace demande quelques précautions, car les contraintes de taille sont sévères.
Simplicité avant tout. À 16×16 pixels, un visuel trop complexe devient illisible. Un monogramme (une ou deux lettres), une forme géométrique simple ou un symbole épuré fonctionnent bien mieux qu’un logo complet avec du texte.
Cohérence avec l’identité visuelle. Le favicon doit reprendre les couleurs et le style du logo site internet. Un visiteur qui revient sur le site doit reconnaître instantanément l’onglet correspondant parmi d’autres.
Fond transparent ou coloré ? Un fond transparent est souvent préférable pour les PNG, car le favicon s’intègre mieux dans l’interface du navigateur quel que soit le thème (clair ou sombre). Certains navigateurs affichent cependant les favicons sur fond blanc ou gris, ce qui peut rendre un visuel blanc invisible. Tester dans différents environnements est conseillé.
Éviter les fichiers trop lourds. Un favicon n’a pas besoin de peser plus de quelques kilo-octets. Un fichier PNG 32×32 bien optimisé représente généralement moins de 5 Ko.
Penser aux modes sombre et clair. Il est possible de déclarer deux versions d’un favicon SVG selon la préférence de couleur du système de l’utilisateur, via une media query CSS intégrée dans le fichier SVG. C’est une pratique avancée mais appréciée sur les interfaces modernes.
Tester l’affichage réel. Après avoir mis en ligne le favicon, vider le cache du navigateur et vérifier l’affichage dans plusieurs navigateurs (Chrome, Firefox, Safari, Edge) et sur mobile reste la seule façon de s’assurer que tout fonctionne comme prévu.
Favicon et identité visuelle : un détail qui compte
Le favicon est souvent négligé lors de la création d’un site, au profit d’éléments plus visibles. Pourtant, c’est l’un des premiers visuels qu’un utilisateur associe à un site web dans son quotidien de navigation. Un favicon soigné, cohérent avec le logo et lisible en petit format, renforce la crédibilité du site et améliore l’expérience dans l’onglet navigateur. C’est un investissement de quelques minutes qui marque durablement l’interface utilisateur.
