Comment ajouter un favicon en HTML (et quelles balises rel utiliser)

Ajouter un favicon à votre site web devrait être l'une des tâches les plus simples en développement web, mais elle fait trébucher les développeurs plus souvent que vous ne le penseriez. Entre les conseils contradictoires sur quelles balises <link> utiliser, les valeurs d'attribut rel déroutantes et les navigateurs qui mettent obstinément en cache l'ancienne icône, faire apparaître un favicon peut ressembler à un jeu de devinettes.

La vérité est que la configuration de favicon pour la plupart des sites web peut être réduite à un seul fichier et une seule balise HTML. Ce guide coupe à travers le bruit et vous donne exactement ce dont vous avez besoin : la configuration minimale pratique, les variations de balise rel les plus utiles et des instructions claires pour gérer les problèmes de mise en cache qui rendent votre nouveau favicon invisible.

Si vous n'avez pas encore de fichier favicon.ico, créez-en un avec Any2ICO en moins d'une minute. Il accepte PNG, SVG, JPG, WebP et d'autres formats, et produit un fichier ICO multi-tailles qui fonctionne partout. Ensuite, revenez ici pour l'intégrer dans votre HTML.

La configuration de favicon la plus simple

Avant de plonger dans les variations de balises et les cas particuliers, voici l'approche qui fonctionne pour l'écrasante majorité des sites web. Elle nécessite un fichier et une ligne de HTML.

Placez favicon.ico à la racine de votre domaine. Téléchargez ou déployez votre fichier favicon.ico pour qu'il soit accessible à https://votredomaine.com/favicon.ico. C'est le chemin que les navigateurs vérifient par défaut depuis la fin des années 1990. Même sans aucune balise HTML pointant vers lui, la plupart des navigateurs trouveront et afficheront un favicon à cet emplacement automatiquement. Cette convention est ancrée dans le comportement du navigateur et ne disparaît pas.

Ajoutez une balise link à votre head HTML. Bien que la convention du chemin racine fonctionne seule, l'ajout d'une balise explicite supprime toute ambiguïté et garantit un comportement cohérent sur tous les navigateurs, sous-domaines et applications à page unique où la racine du document peut ne pas correspondre directement à la racine du serveur.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Titre de votre page</title>
  <link rel="icon" href="/fr/favicon.ico" sizes="any">
</head>
<body>
  <!-- votre contenu -->
</body>
</html>

Cette unique balise <link> suffit pour tous les principaux navigateurs : Chrome, Firefox, Safari, Edge et même les versions héritées d'Internet Explorer. L'attribut sizes="any" indique au navigateur que le fichier ICO contient plusieurs résolutions et qu'il doit sélectionner la plus appropriée pour le contexte actuel, qu'il s'agisse d'une icône d'onglet 16x16 ou d'une icône de signet 32x32.

C'est la configuration que nous recommandons pour la plupart des sites web. Elle est simple, fiable et universellement prise en charge. Vous pouvez vous arrêter ici et votre favicon fonctionnera correctement dans pratiquement tous les scénarios.

Mise en cache et « Favicon ne s'affiche pas »

Vous avez déployé votre nouveau favicon, rafraîchi la page et l'ancienne icône vous regarde toujours depuis l'onglet du navigateur. Ce n'est pas un bug dans votre code. C'est presque certainement un problème de mise en cache, et c'est de loin la raison la plus courante pour laquelle les développeurs pensent que leur configuration de favicon est cassée alors qu'elle fonctionne en réalité parfaitement.

Les navigateurs mettent les favicons en cache de manière agressive. Contrairement aux ressources de page régulières, les favicons sont souvent mis en cache séparément et pour des périodes beaucoup plus longues. Chrome, par exemple, stocke les favicons dans une base de données dédiée qui ne répond pas toujours à un rafraîchissement de page normal. Firefox et Safari ont un comportement similaire. Cela signifie que même après avoir remplacé le fichier sur votre serveur, le navigateur peut continuer à afficher l'ancienne icône pendant des heures voire des jours.

Rafraîchissement forcé : Appuyez sur Ctrl+Shift+R (Windows/Linux) ou Cmd+Shift+R (macOS) pour contourner le cache et recharger toutes les ressources depuis le serveur. Cela fonctionne pour la plupart des ressources de page mais n'efface pas toujours le cache de favicon spécifiquement.

Fenêtre incognito : Ouvrez votre site dans une fenêtre de navigation privée ou incognito. Cela commence avec un cache complètement vide et chargera le favicon frais depuis le serveur. Si vous voyez le favicon correct en mode incognito, votre configuration est correcte et la session de navigation normale a simplement besoin de temps pour récupérer le changement.

Vider le cache du navigateur manuellement : Si incognito confirme le nouveau favicon mais que votre session régulière montre toujours l'ancien, videz les images et fichiers mis en cache de votre navigateur. Dans Chrome, allez dans Paramètres, Confidentialité et sécurité, Effacer les données de navigation et sélectionnez Images et fichiers mis en cache. Après effacement, rechargez votre site.

Ajouter une chaîne de requête anti-cache : Comme mesure temporaire pendant le développement, vous pouvez ajouter une chaîne de requête pour forcer le navigateur à traiter le favicon comme une nouvelle ressource : <link rel="icon" href="/fr/favicon.ico?v=2" sizes="any">. Incrémentez le numéro de version chaque fois que vous mettez à jour le favicon. Supprimez la chaîne de requête une fois que vous êtes satisfait de l'icône, ou conservez-la comme stratégie de versionnage permanente.

Tailles et choix de fichiers : ICO vs PNG

Devriez-vous utiliser un fichier ICO, un fichier PNG ou les deux ? La réponse dépend de la complexité que vous voulez dans votre configuration et des navigateurs que vous devez prendre en charge.

ICO est le choix universel. Le format ICO est le format de favicon standard depuis qu'Internet Explorer 5 a introduit les favicons en 1999. Chaque navigateur qui prend en charge les favicons prend en charge ICO. Un seul fichier ICO peut contenir plusieurs tailles (16x16, 32x32, 48x48 et plus), donc le navigateur a toujours la bonne résolution disponible sans avoir besoin de maintenir des fichiers séparés pour chaque taille. Pour la simplicité et la compatibilité maximale, ICO est le pari le plus sûr.

PNG est une alternative moderne. Toutes les versions actuelles de Chrome, Firefox, Safari et Edge prennent en charge les favicons PNG via la balise <link rel="icon" type="image/png">. Les favicons PNG sont légèrement plus simples à créer (un seul fichier PNG à une taille) mais vous avez besoin d'un fichier et d'une balise séparés pour chaque taille que vous voulez fournir. Cela peut signifier deux ou trois balises link supplémentaires dans votre head HTML.

SVG est l'option la plus récente. Les favicons SVG sont pris en charge dans Chrome, Firefox et Edge, mais pas dans Safari début 2025. Un favicon SVG s'adapte parfaitement à n'importe quelle taille, ce qui est attrayant pour les écrans haute résolution. Cependant, le manque de prise en charge Safari signifie que vous avez toujours besoin d'un secours ICO ou PNG.

Pour la plupart des sites web, nous recommandons l'approche pragmatique : utilisez un fichier ICO multi-tailles comme votre favicon principal et ajoutez optionnellement une icône PNG ou SVG comme amélioration. Cela vous donne une compatibilité universelle via le fichier ICO et une optimisation moderne via les formats supplémentaires. Pour une analyse détaillée des tailles à inclure et pourquoi, consultez notre guide sur les tailles de favicon expliquées.