Qu'est-ce qu'un Favicon (et quelles tailles me faut-il) ?

Un favicon (abréviation de "favorite icon") est le petit graphique que les navigateurs affichent à côté du titre de votre page dans l'onglet, dans la barre des signets, dans l'historique et de plus en plus dans les résultats des moteurs de recherche. Le nom remonte à Internet Explorer 5 en 1999, où l'icône servait uniquement d'identifiant de signet. Vingt-cinq ans plus tard, le même format de fichier et le même balisage HTML fonctionnent toujours, mais le rôle du favicon s'est tellement étendu au-delà de cet objectif initial que "uploadez juste un .ico de 16x16" n'est plus la bonne réponse.

À quoi sert réellement un favicon aujourd'hui

Les navigateurs et systèmes d'exploitation modernes puisent dans l'ensemble des favicons pour une large gamme de contextes, chacun avec ses propres exigences de taille et de format :

• Onglets et signets du navigateur. Généralement rendu à 16x16 ou 32x32 pixels CSS, mais sur les écrans haute densité, le navigateur récupère une version plus grande et la réduit. Une icône minuscule et pixelisée à côté d'un titre net paraît dépassée.
• Résultats de recherche. Google affiche des favicons à côté des résultats mobiles depuis 2019 et sur desktop depuis 2023. L'icône doit faire au moins 48x48, des multiples de 48 sont recommandés, et le fichier doit être crawlable.
• Écran d'accueil iOS et Android. Lorsqu'un utilisateur choisit "ajouter à l'écran d'accueil", iOS récupère l'apple-touch-icon (180x180), Android récupère les icônes du web app manifest (typiquement 192x192 et 512x512). Sans déclaration explicite, les deux plateformes génèrent une capture d'écran floue en fallback.
• Progressive Web Apps. Les PWA installées comme applications autonomes dépendent du web app manifest pour les icônes du lanceur, du sélecteur de tâches et de l'écran de démarrage. De mauvaises tailles ici donnent un site installable qui paraît cassé.
• Onglets épinglés Safari macOS. Utilise un SVG monochrome séparé (mask-icon) pour l'apparence des onglets épinglés. Un cas de niche, mais trivial à supporter.
• Épinglage de tuiles Windows. Edge et le menu Démarrer de Windows peuvent épingler des sites comme tuiles, ce qui nécessite un jeu séparé de déclarations msapplication-TileImage.

La conséquence pragmatique : il vous faut un petit ensemble de fichiers (typiquement quatre à six), pas un seul .ico, et une poignée de balises HTML link pour les déclarer.

Quels formats de fichier comptent

Trois formats sont pertinents en 2026, et l'époque où il fallait tous les avoir simultanément est révolue.

• PNG. Le bon défaut. Support universel, sans perte, les fonds transparents fonctionnent partout. Un PNG par taille cible.
• SVG. Supporté par tous les navigateurs modernes pour les favicons. Un SVG s'adapte à toutes les tailles et reste net sur les écrans haute densité sans nécessiter d'assets retina séparés. Réserve : les favicons SVG doivent être autonomes (pas de références externes, pas de feuilles de style externes, pas de polices intégrées) et Safari ne les supporte qu'avec un fallback PNG.
• ICO. Le format conteneur historique qui peut héberger plusieurs tailles dans un seul fichier. Toujours utile pour un cas spécifique : la requête vers /favicon.ico à la racine du site, que tout navigateur, lecteur RSS et crawler fait implicitement même si vous n'y faites pas référence. Renvoyer un 404 est inoffensif mais génère du bruit dans les logs serveur. Un petit .ico multi-taille (16x16, 32x32, 48x48 dans un seul fichier) le fait taire.

WebP et AVIF, bien qu'excellents pour les images de contenu, ne sont pas utilisés pour les favicons car le support des navigateurs dans ce rôle est inconsistant. Restez sur PNG et SVG.

La liste réelle des fichiers dont vous avez besoin en 2026

Un ensemble de favicons solide et pérenne couvre tous les contextes ci-dessus avec ce minimum :

• favicon.ico — multi-taille (16, 32, 48), placé à la racine du site
• favicon.svg — vectoriel, utilisé par les navigateurs modernes quand disponible
• favicon-96x96.png — fallback raster explicite à une taille intermédiaire confortable
• apple-touch-icon.png — 180x180, sans transparence (iOS ajoute lui-même les coins arrondis)
• web-app-manifest-192x192.png — écran d'accueil Android, lanceur PWA
• web-app-manifest-512x512.png — écran de démarrage PWA, grands contextes de tuile

Cela fait six fichiers. Le HTML correspondant dans <head> :

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Et un site.webmanifest minimal :

{
  "name": "Nom de votre site",
  "short_name": "Site",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Cela couvre les onglets de navigateur, les signets, les résultats de recherche Google, l'écran d'accueil iOS, l'écran d'accueil Android et l'installation PWA. Tout ce qui va au-delà relève du cas particulier.

Contraintes de design pour un favicon vraiment lisible

La partie la plus difficile du design d'un favicon n'est pas l'export, c'est de faire quelque chose de lisible à 16x16. Quelques règles empiriques qui donnent constamment de bons résultats :

• Simplifiez impitoyablement. Un logo complet fonctionne rarement comme favicon 16x16. Utilisez un seul élément dominant : une lettre, un symbole, une marque abstraite. Tout ce qui a des traits fins ou des détails délicats devient flou.
• Contraste fort. Le favicon repose sur un chrome de navigateur clair ou sombre que vous ne pouvez pas prédire. Du blanc pur sur transparent disparaît sur les thèmes clairs ; du noir pur sur transparent disparaît sur les thèmes sombres. Utilisez un fond plein ou concevez pour les deux modes (un SVG avec media queries prefers-color-scheme fonctionne).
• Ratio carré avec marge de sécurité. Concevez sur un canevas carré mais gardez environ 10% de padding par rapport aux bords. Certaines plateformes (iOS, icônes adaptatives Android) recadrent ou masquent l'icône, et un design qui déborde jusqu'au bord se fait rogner.
• Testez en taille réelle. Regarder une icône 16x16 à 200% de zoom est trompeur. Rendez-la à 100% à côté d'autres onglets pour voir comment elle se bat réellement pour l'attention.

WordPress : comment fonctionne l'icône du site

WordPress a un support de favicon intégré depuis la version 4.3. Dans l'admin sous Apparence, Personnaliser, Identité du site, il y a un champ "Icône du site" qui accepte une seule image carrée, minimum 512x512. WordPress génère et sert ensuite automatiquement les différentes tailles de favicon à partir de cette source.

La génération automatique couvre favicon.ico, apple-touch-icon en 180x180 et les tailles PNG standard dans le head HTML. Elle ne génère pas de web app manifest par défaut, donc l'installation PWA se rabattra sur l'apple-touch-icon. Pour la plupart des sites, c'est suffisant.

Les lacunes du Site Icon intégré : il ne peut pas servir de fichiers différents par résolution (pas de support SVG au-delà de la conversion en raster), et il ne produit pas de manifest avec la taille 512x512 plus grande que préfèrent les installations PWA et les splash screens Android. Pour un site où vous tenez vraiment à l'apparence PWA, compléter le Site Icon par des balises <link> manuelles via le functions.php d'un child theme est la voie la plus propre. Des plugins comme RealFaviconGenerator (aussi un excellent générateur web si vous voulez éviter l'export manuel) gèrent cela de bout en bout.

Comment vérifier que votre setup favicon fonctionne

1. Contrôle d'onglet. Ouvrez le site dans une fenêtre privée (pour éviter les favicons cachés) et confirmez que l'icône apparaît à côté du titre. Testez au moins Chrome, Firefox et Safari.
2. Requête racine. Visitez /favicon.ico directement. Doit renvoyer un 200 avec l'icône, pas un 404. Beaucoup de sites manquent cela même quand leur HTML a un <link rel="icon"> correct.
3. Écran d'accueil iOS. Sur un iPhone, touchez le bouton partager dans Safari puis "Sur l'écran d'accueil". L'aperçu doit montrer votre icône nette 180x180, pas une capture floue de la page.
4. Recherche Google. Cherchez votre site depuis un mobile. L'icône doit apparaître à côté du résultat. Sinon, l'URL Google https://www.google.com/s2/favicons?domain=votresite.com montre ce que le crawler a actuellement en cache.
5. Lighthouse. L'audit PWA de Lighthouse dans les DevTools Chrome détecte les entrées de manifest manquantes, les mauvaises tailles et les autres problèmes de déclaration.

Problèmes courants et leurs causes

• "Mon favicon ne s'affiche pas." Presque toujours un problème de cache. Les navigateurs cachent les favicons très agressivement. Videz le cache de favicons (Chrome : visitez chrome://favicon-cache, Firefox : videz le cache et les données hors ligne) ou testez en navigation privée.
• "S'affiche sur desktop mais pas sur mobile." Généralement un apple-touch-icon manquant ou un chemin de manifest erroné. Les navigateurs mobiles privilégient leurs propres icônes spécifiques à la plateforme sur le <link rel="icon"> générique.
• "La recherche Google montre un globe générique." Soit le favicon est trop petit (moins de 48x48), soit le fichier n'est pas crawlable (bloqué par robots.txt, derrière une authentification, mauvais content-type), soit Google n'a tout simplement pas encore re-crawlé. La latence de re-crawl pour les favicons est souvent de plusieurs semaines.
• "L'icône d'écran d'accueil a un cadre blanc autour." Les images apple-touch-icon ne doivent pas avoir de transparence ; iOS n'aplatit pas les fonds transparents à votre couleur de thème, il les laisse blancs. Sauvegardez avec un fond plein qui correspond à votre marque.
• "L'icône paraît floue sur les écrans retina." Seul le petit favicon.ico est servi. Les navigateurs modernes utiliseront la version SVG ou PNG 96x96 si vous la déclarez ; vérifiez que le HTML inclut effectivement ces balises link.

Ce que vérifie InspectWP

La section favicon d'un rapport InspectWP vérifie qu'un favicon est déclaré dans le head HTML, que l'URL /favicon.ico renvoie une réponse valide, et qu'un apple-touch-icon est défini pour le support d'écran d'accueil iOS. Manquer l'un d'eux est un constat de faible sévérité, mais l'effet cumulé sur les premières impressions (résultats de recherche, signets, écran d'accueil mobile) est réel. Un site qui paraît soigné partout sauf sur son favicon donne une impression d'inachevé. La bonne nouvelle : c'est une configuration unique qui, bien faite, n'a plus jamais besoin d'être touchée.