Comment récupérer le favicon de n'importe quel site (et pourquoi le vôtre est probablement cassé)

Un favicon est le plus petit élément de votre site web et l’un des plus vus. Il se trouve dans l’onglet du navigateur, à côté du favori, dans la liste d’autocomplétion quand quelqu’un tape votre domaine de mémoire, et (de plus en plus) juste à côté de votre résultat dans les pages de recherche et les résumés générés par l’IA. Seize pixels, peut-être trente-deux, et il fait plus de travail de branding par pixel que presque tout ce que vous possédez.

C’est exactement pour ça que les gens le négligent. Personne ne prévoit du temps de design pour un carré de 16x16. La plupart des sites se retrouvent avec ce que leur CMS a généré automatiquement il y a des années, un logo étiré qui ressemble à une tache grise, ou dans certains cas rien du tout, juste l’icône générique en forme de globe du navigateur à l’endroit où devrait figurer une marque.

Il y a deux situations où vous avez réellement besoin de récupérer un favicon. Premièrement : vous construisez un annuaire, un tableau comparatif, une page de favoris ou une analyse de concurrent, et vous avez besoin d’un lot d’icônes de sites rapidement, sans faire une capture d’écran d’un onglet de navigateur quarante fois. Deuxièmement : vous auditez votre propre site et devez voir, honnêtement, à quoi ressemble votre favicon aux tailles qui comptent, parce que “ça a l’air bien dans mon éditeur” et “ça a l’air bien dans un onglet Chrome à 16px” ne sont pas la même affirmation.

Les deux cas ont la même solution.

Récupérez le favicon de n’importe quel site en un clic

Utilisez le Favicon Fetcher. C’est gratuit, ça tourne entièrement dans votre navigateur, et ça fait une seule chose : transformer une liste de domaines en une grille d’icônes prêtes à l’emploi.

Le déroulé est volontairement ennuyeux :

1. Collez des domaines. Un par ligne, dans la zone de texte. URL complètes, domaines nus, avec www. ou sans, peu importe, l’outil normalise tout. Collez un domaine ou cinquante.
2. Choisissez une taille. Des boutons pour 16, 32, 64, 128 et 256px. 64 est sélectionné par défaut car c’est le juste milieu pour prévisualiser la qualité sans demander un fichier qui n’existe pas (plus de détails là-dessus ci-dessous).
3. Récupérez. Chaque domaine se transforme en carte : l’icône, le nom de domaine, et trois actions.
4. Copiez l’URL, copiez la balise <img>, ou téléchargez le PNG. Ce dont vous avez besoin. Il y a aussi un bouton “tout copier” qui envoie toutes les URL récupérées dans votre presse-papiers d’un coup, ce qui est le chemin rapide si vous remplissez un tableur ou une fiche d’annuaire.

Rien n’est téléversé, rien n’est stocké, il n’y a pas de mur d’inscription. Vous collez, vous récupérez, vous repartez avec une icône.

Une réserve honnête : l’outil récupère les icônes de la même façon que votre navigateur quand il ne trouve pas le favicon déclaré d’un site, en demandant à un service de résolution de favicon ce qu’il a en cache pour ce domaine. Cela signifie qu’il est excellent pour “donne-moi vite une icône pour la ligne de ce concurrent dans mon tableau comparatif” et que ce n’est pas l’outil à choisir quand vous avez besoin d’une preuve au pixel près de la configuration <link rel="icon"> de votre propre site. Pour ça, vérifiez votre propre balisage directement (section suivante).

Si vous construisez quoi que ce soit en forme de liste, un annuaire, un classement des “meilleurs”, une page de soumission, les favicons sont ce qui rend le tout lisible d’un coup d’œil. Exemple concret : notre outil Directory Finder affiche une petite icône à côté de chaque entrée pour exactement cette raison. Un mur de liens textuels s’oublie. Un mur de liens textuels avec des icônes reconnaissables à côté est un mur que vous pouvez réellement parcourir.

L’antisèche du favicon

Voici ce qui est réellement demandé et rendu en 2026, réduit à l’essentiel et rien de plus.

Les tailles qui comptent :

• 16x16 - l’onglet du navigateur et la barre de favoris. C’est celle que les gens oublient de vérifier. Un détail qui paraît net à 64px se transforme en bouillie à 16px.
• 32x32 - la barre des tâches Windows, certains gestionnaires de favoris, et la taille que la plupart des navigateurs demandent réellement par défaut désormais sur les écrans à haute densité.
• 48x48 - certains anciens raccourcis Windows et une poignée d’intégrations bureau. Faible priorité mais peu coûteux à inclure.
• 180x180 - l’icône Apple touch. C’est ce qui s’affiche quand quelqu’un ajoute votre site à l’écran d’accueil de son iPhone. Ne la mettez pas et iOS rognera et redimensionnera votre favicon normal, mal.
• 192x192 et 512x512 - les icônes PWA et écran d’accueil Android, déclarées dans le manifeste de votre application web. Si vous ne livrez pas de manifeste, vous pouvez les ignorer. Si vous en livrez un, faites-les bien ou votre icône “installée” ressemblera à une tache.

Les formats, classés selon ce que vous devriez réellement utiliser :

• PNG est la réponse par défaut. Tous les navigateurs modernes le supportent, il se compresse bien, et c’est ce que vous devriez générer pour chacune des tailles ci-dessus.
• ICO est le format multi-résolution historique (littéralement plusieurs images regroupées dans un seul fichier .ico). Il vaut toujours la peine de le garder en tant que favicon.ico à la racine parce que certains crawlers et navigateurs très anciens s’y rabattent automatiquement même sans balise <link>, mais c’est un filet de sécurité, pas votre format principal.
• SVG : les favicons SVG existent bel et bien et sont légers, et un petit nombre de navigateurs (surtout basés sur Chromium) supportent le basculement automatique clair/sombre au sein d’un seul fichier SVG. Ne comptez pas encore dessus comme unique format ; le support est assez inconstant pour que vous vouliez toujours des solutions de repli en PNG.

Les balises qui sont réellement utilisées :

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

Voilà toute la liste pratique. Vous n’avez pas besoin d’une douzaine de balises <link> avec toutes les tailles imaginables intégrées ; c’est un vestige d’une époque de support navigateur bien plus fragmenté. Couvrez les tailles d’onglet, couvrez l’Apple touch, couvrez le manifeste si vous avez une PWA, et c’est terminé.

Pourquoi votre favicon est probablement cassé

Les favicons échouent en silence. Personne ne remonte un bug parce que l’icône de votre onglet ne s’est pas chargée, les gens ne remarquent simplement pas votre marque. Voici ce qui se passe généralement, classé approximativement par fréquence à laquelle nous voyons chaque cas.

Mauvais chemin ou fichier manquant. Le classique : favicon.ico ne se trouve pas réellement à la racine de votre domaine, ou une refonte a déplacé les fichiers dans un nouveau dossier et personne n’a mis à jour la balise <link>. Vérifiez-le directement : visitez votredomaine.com/favicon.ico dans un navigateur. Si vous obtenez une 404, c’est votre bug, point final.

Mise en cache agressive. Les navigateurs mettent les favicons en cache de façon tenace, parfois pour toute la durée de la session de l’onglet ou plus longtemps, ce qui veut dire que vous pouvez corriger le fichier et toujours voir l’ancienne icône cassée pendant des jours. Si vous venez de livrer un nouveau favicon et qu’il ne s’affiche pas, ne modifiez pas votre HTML davantage dans la panique. Faites un rafraîchissement forcé, ou vérifiez dans une fenêtre privée/de navigation privée, avant de conclure que la correction n’a pas marché.

Tailles manquantes, pas icône manquante. Le favicon “existe” mais seulement en tant que fichier basse résolution unique, donc le navigateur agrandit une image de 16px pour remplir un emplacement de 32px ou 180px. Il paraît flou, doux ou pixélisé exactement aux endroits où la netteté compte le plus (l’emplacement de l’icône Apple touch, surtout). La solution est de générer le jeu complet de tailles, pas de re-téléverser le même fichier.

Pas de variante mode sombre. Si votre favicon est une marque sombre sur fond transparent, il disparaît sur une barre d’onglets de navigateur sombre. S’il est clair sur transparent, même problème à l’inverse. Soit vous concevez quelque chose qui tient sur les deux, soit vous livrez un SVG avec une media query prefers-color-scheme à l’intérieur pour les navigateurs qui le supportent.

Hotlinking bloqué ou règles CDN agressives. Si votre CDN ou votre WAF bloque les user agents ou référents non reconnus, les services de résolution de favicon (et certains navigateurs sous des réglages de confidentialité stricts) peuvent obtenir une réponse bloquée ou vide au lieu de votre icône. Si votre favicon fonctionne quand vous visitez directement mais s’affiche vide dans des contextes tiers, vérifiez les règles bots et hotlink de votre CDN avant de supposer que le fichier lui-même est le problème.

FAQ

Puis-je récupérer un favicon sans rien télécharger ? Oui. Utilisez le Favicon Fetcher, collez le domaine, et copiez l’URL directement. Aucun téléchargement nécessaire, sauf si vous voulez spécifiquement enregistrer le fichier PNG en local.

Quelle est la vraie différence entre favicon.ico et un favicon PNG ? Le .ico est un format conteneur qui peut regrouper plusieurs résolutions dans un seul fichier, ce qui explique pourquoi il est devenu le format par défaut historique. Le PNG est plus simple, se compresse mieux, et c’est vers lui que pointent typiquement les balises <link rel="icon"> modernes. Gardez un .ico à la racine comme solution de repli ; utilisez du PNG pour tout ce que vous déclarez explicitement dans votre <head>.

Pourquoi mon favicon affiche-t-il la mauvaise (ancienne) icône ? Presque toujours la mise en cache. Essayez un rafraîchissement forcé ou une fenêtre de navigation privée avant de supposer que votre correction n’a pas pris. Si c’est toujours faux après ça, vérifiez que vos balises <link> pointent bien vers le chemin réel du fichier mis à jour et non vers un nom de fichier périmé.

Ai-je besoin d’un favicon distinct pour les appareils Apple ? Oui, si vous voulez qu’il ait l’air correct. Sans une balise apple-touch-icon pointant vers une image 180x180, iOS en générera une automatiquement à partir de votre favicon existant, généralement en le rognant ou le redimensionnant, et le résultat a rarement l’air intentionnel.

Un favicon SVG vaut-il l’effort ? Il vaut la peine de l’avoir comme amélioration, pas de compter dessus seul. Le support des favicons SVG clair/sombre dynamiques reste inconstant selon les navigateurs. Livrez les tailles PNG comme base et ajoutez le SVG par-dessus si vous voulez la finition supplémentaire.