Vous avez sûrement déjà remarqué ce petit détail qui fait toute la différence : le favicon. Cette mini-icône affichée dans l’onglet du navigateur qui semble anodine participe fortement à votre image de marque. Mais avec l’arrivée du mode sombre, votre joli favicon noir devient parfois… invisible. Heureusement, il existe une solution en frontend simple, propre et élégante pour afficher un favicon différent en mode clair et en mode sombre.
- Rendre votre favicon parfaitement visible en mode clair comme en mode sombre pour améliorer immédiatement l’expérience utilisateur.
- Comprendre comment les navigateurs détectent le thème et adapter facilement votre site avec des solutions modernes et fiables.
- Mettre en place une intégration propre sur WordPress pour renforcer votre image de marque sans complexité technique.
Dans ce tutoriel, vous allez apprendre à afficher un favicon différent en mode clair et en mode sombre pas à pas, même si vous débutez. Nous allons comprendre le principe, voir plusieurs méthodes (HTML, SVG, CSS) et même comment l’appliquer sur WordPress.
- Comprendre le problème du favicon en mode sombre
- Le secret : la media query prefers-color-scheme
- Méthode 1 : Deux favicons (clair et sombre)
- Méthode 2 : Utiliser un favicon SVG intelligent
- Méthode 3 : via JavaScript (moins recommandé)
- Comment tester votre favicon en mode sombre ?
- Et sur WordPress ?
- Les erreurs fréquentes à éviter
Comprendre le problème du favicon en mode sombre
Avant de plonger dans le code, prenons 30 secondes pour comprendre ce qui se passe réellement.
Un favicon classique est une petite image (souvent en .ico, .png ou .svg) que vous déclarez dans votre site. Le navigateur l’affiche tel quel sans se soucier du thème utilisé par l’utilisateur. Mais cela provoque parfois :
- Un favicon noir sur fond sombre = invisible
- Un favicon blanc sur fond clair = invisible aussi
Bref, peu importe votre choix, vous perdez dans un des deux cas.
C’est ici qu’intervient une notion très importante : la détection du thème utilisateur.
Le secret : la media query prefers-color-scheme
Les navigateurs modernes savent si l’utilisateur est en mode clair ou en mode sombre. Et ça, c’est une mine d’or. On peut exploiter cette information grâce à une media query CSS :
@media (prefers-color-scheme: dark) {
/* styles pour le mode sombre */
}Mais ce qui est encore plus intéressant, c’est qu’on peut utiliser ce principe directement dans le HTML pour les favicons.
👉 Darkmode CSS : Codez un mode sombre complet sans JavaScript.
Méthode 1 : Deux favicons (clair et sombre)
C’est la méthode la plus simple à comprendre et à mettre en place.
Étape 1 : préparer vos deux icônes
Vous allez créer :
favicon-light.png(pour fond clair)favicon-dark.png(pour fond sombre)
Petit conseil : testez-les dans un onglet pour vérifier leur lisibilité.
Étape 2 : ajouter les favicons dans le HTML
Dans votre <head>, ajoutez ceci :
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">Et voilà. Oui, c’est tout.
Le navigateur choisira automatiquement le bon favicon en fonction du thème utilisateur. Plutôt simple, non ?
Étape 3 : ajouter un fallback (important)
Tous les navigateurs ne gèrent pas encore parfaitement cette fonctionnalité. Il est donc préférable d’ajouter un favicon par défaut :
<link rel="icon" href="/favicon-default.png">Ce fichier sera utilisé si les media queries ne sont pas supportées.
Méthode 2 : Utiliser un favicon SVG intelligent
Si vous aimez les solutions élégantes (et un peu plus techniques), vous allez adorer celle-ci : Un fichier SVG peut contenir du CSS interne. Et donc… détecter le mode sombre.
Exemple de favicon SVG dynamique
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
circle {
fill: black;
}
@media (prefers-color-scheme: dark) {
circle {
fill: white;
}
}
</style>
<circle cx="50" cy="50" r="40"/>
</svg>Pourquoi c’est génial ?
- Un seul fichier à gérer
- Adaptation automatique
- Ultra léger
Comment l’utiliser ?
Dans votre HTML :
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?<link rel="icon" href="/favicon.svg" type="image/svg+xml">Attention : Certains navigateurs anciens (ou Safari dans certains cas) peuvent avoir des limitations avec les SVG en favicon.
- Donc si vous voulez être 100% safe, combinez cette méthode avec la précédente.
Méthode 3 : via JavaScript (moins recommandé)
On peut aussi détecter le mode sombre en JavaScript :
const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const favicon = document.querySelector("link[rel='icon']");
if (darkMode) {
favicon.href = '/favicon-dark.png';
} else {
favicon.href = '/favicon-light.png';
}Pourquoi mieux vaut-il éviter cette méthode ?
- Chargement plus lent
- Moins propre
- Peut créer un effet de « flash » du favicon
- Bref, gardez-la en solution de secours uniquement.
Comment tester votre favicon en mode sombre ?
C’est une étape que beaucoup oublient… et pourtant elle est essentielle.
- Sur Mac : Réglages → Apparence → sombre
- Sur Windows : Paramètres → Personnalisation → Couleurs
- Dans Chrome : Vous pouvez forcer le mode sombre dans les DevTools.
Et sur WordPress ?
Maintenant, passons à ce qui vous intéresse sûrement le plus. WordPress permet d’ajouter un favicon… mais pas nativement en double (clair/sombre).
Alors comment faire ?
Méthode 1 : via le thème (recommandé)
Vous allez modifier le fichier header.php.
Ajoutez :
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">Ce fichier se trouve dans votre thème :
/wp-content/themes/votre-theme/header.phpMéthode 2 : via functions.php
Si vous préférez une approche plus « WordPress friendly » :
function custom_favicon_dark_mode() {
echo '
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">
';
}
add_action('wp_head', 'custom_favicon_dark_mode');Méthode 3 : avec un plugin SEO
Certains plugins comme : All in One SEO ou Yoast SEO permettent d’ajouter du code dans le <head>.
Vous pouvez y coller directement votre code favicon
Les erreurs fréquentes à éviter
Vous allez gagner du temps si vous évitez ces pièges :
- Favicon trop détaillé : Un favicon doit être lisible en 16×16 pixels. Simplifiez au maximum.
- Mauvais contraste : Testez toujours vos deux versions.
- Cache navigateur : Le favicon est très souvent mis en cache.
- vider le cache
- changer le nom du fichier si nécessaire
Optimisation SEO et bonnes pratiques
Même si le favicon n’impacte pas directement votre SEO, il joue sur :
- le taux de clic (CTR)
- la reconnaissance de marque
- l’expérience utilisateur
Et ça, Google adore.
Vous voyez, gérer un favicon en mode sombre n’est pas aussi compliqué qu’on pourrait le croire. Avec quelques lignes de code et un peu de réflexion sur le design, vous pouvez offrir une expérience beaucoup plus propre et professionnelle à vos visiteurs.
Mais surtout, retenez ceci : ce sont souvent les petits détails qui font les grands sites. Un favicon bien pensé, visible en mode clair comme en mode sombre, c’est un signal subtil… mais puissant. Et maintenant, vous avez toutes les cartes en main pour le mettre en place correctement.
Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi