Un favicon qui s'adapte au mode sombre
Seul le SVG peut réagir au thème du navigateur. Intégrez une balise <style> contenant une requête prefers-color-scheme directement dans le SVG — le navigateur l'applique au moment d'afficher l'icône. Cela garde un logo sombre visible sur une barre d'onglets sombre :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) { path { fill: #fff; } }
</style>
<path d="…your icon path…"/>
</svg>
Référencez-le ainsi : <link rel="icon" href="/icon.svg" type="image/svg+xml">. Conservez un favicon.ico classique à côté pour les navigateurs et Google Search, qui n'exécutent pas la requête média.
Icône d'onglet épinglé Safari
Lorsqu'on épingle votre onglet dans Safari sur ordinateur, celui-ci utilise un SVG distinct, plat et monochrome (une « mask icon ») — que de la forme, aucun dégradé :
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F0562E">
L'attribut color définit la teinte de l'épingle. Exportez une version monochrome de votre symbole pour cet usage ; tout ce qui comporte des détails fins ou plusieurs couleurs s'affichera comme une tache pleine.
Icônes maskables et zone de sécurité
Les icônes adaptatives d'Android recadrent votre image en cercle, en squircle ou en carré arrondi selon le lanceur. Une icône ordinaire se fait rogner les coins. Marquez les icônes du manifeste comme maskables et gardez le contenu important dans la « zone de sécurité » centrale — grosso modo les 80 % du milieu, soit une marge d'environ 10 % sur chaque côté :
{ "src": "/android-chrome-512x512.png", "sizes": "512x512",
"type": "image/png", "purpose": "any maskable" }
Concevez avec une couleur de fond à fond perdu et le logo bien à l'intérieur de cette marge, afin qu'aucune forme ne vienne le rogner.
theme-color : la barre autour de l'icône
Ce n'est pas le favicon lui-même, mais il se trouve juste à côté sur mobile — theme-color teinte l'interface du navigateur et la barre d'adresse. Il peut aussi réagir au thème :
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#111316" media="(prefers-color-scheme: dark)">
Ce que contient réellement un vrai .ico
Un vrai .ico est un conteneur qui héberge plusieurs images bitmap à la fois — généralement 16, 32 et 48 pixels. Le navigateur choisit la taille dont il a besoin selon le support (onglet, barre de favoris ou raccourci Windows), si bien qu'il n'a jamais à agrandir une image de 16 px ni à réduire une image de 512 px. Un « favicon.ico » qui n'est en réalité qu'un simple PNG renommé perd cet avantage et paraît flou à certaines tailles. Ce générateur écrit un véritable ICO multi-taille.
Les règles de Google Search pour les favicons
Pour que votre icône apparaisse à côté de votre résultat, Google exige tout ce qui suit : le favicon réside à une URL constante ; il est carré et multiple de 48×48 (48, 96, 144…) ; il se trouve sur le même hôte que le site ; la page qui l'héberge est indexable ; et l'icône est visuellement nette. Google le récupère et le met en cache avec son propre robot, séparément de la page — après un changement, comptez donc de quelques jours à quelques semaines et vérifiez que /favicon.ico renvoie un code 200 à Googlebot.
Gardez des fichiers légers
- SVG : retirez les métadonnées d'éditeur et les commentaires ; un SVG d'icône bien nettoyé fait souvent moins de 1 Ko.
- ICO : 16/32/48 uniquement — résistez à la tentation d'ajouter 64/128/256, qui alourdissent le fichier sans aucun bénéfice.
- PNG : l'icône 512 est la plus lourde ; faites-la passer par un optimiseur sans perte.
Testez-le là où il apparaît vraiment
Ne vous fiez pas à un seul navigateur. Vérifiez : un onglet normal (clair et sombre), un favori, un « Ajouter à l'écran d'accueil » sur iOS, une installation Android, et le résultat Google une fois qu'il a été réexploré. Un moyen rapide de forcer une lecture propre pendant les tests consiste à utiliser une fenêtre privée et un paramètre ?v= sur les URL des icônes.