Un logo noir sur fond transparent est parfait sur un onglet clair, et invisible sur un onglet sombre. Le format ICO ne sait pas s'adapter, mais le favicon SVG le peut : il embarque une règle CSS qui change les couleurs selon le thème du navigateur.
Le problème : un seul fichier, deux fonds
Depuis que les navigateurs suivent le thème du système, la barre d'onglets peut être presque blanche ou presque noire chez deux visiteurs consultant la même page. Un favicon monochrome dessiné pour l'un devient illisible pour l'autre.
Beaucoup de sites contournent le problème en ajoutant un fond opaque coloré à leur icône. Ça marche, mais l'icône devient une pastille lourde visuellement, là où les grandes marques restent sur un symbole détouré.
La bonne réponse est de laisser le navigateur choisir, et c'est possible sans JavaScript ni détection côté serveur.
Comment fonctionne le SVG adaptatif
Un fichier SVG est un document, pas une image figée : il peut contenir une balise style, donc des media queries. En y plaçant une règle prefers-color-scheme: dark, on redéfinit la couleur de remplissage des tracés quand le navigateur est en thème sombre.
Concrètement, le SVG déclare une couleur par défaut pour le thème clair, puis une règle qui la remplace en thème sombre. Le navigateur applique la bonne au moment du rendu, et met à jour l'onglet immédiatement si le visiteur bascule de thème.
Le même mécanisme permet d'aller plus loin qu'un simple inversement : vous pouvez servir un dessin entièrement différent, par exemple un symbole détouré en clair et une pastille pleine en sombre.
Déclarer le SVG à côté du .ico
Le SVG se déclare avec link rel="icon" type="image/svg+xml" href="/favicon.svg". Les navigateurs qui le comprennent le préfèrent au reste, et ceux qui l'ignorent retombent sur le favicon.ico de la racine.
Vous n'avez donc rien à supprimer : les deux fichiers cohabitent, chacun couvrant les clients de l'autre. C'est le principe de l'amélioration progressive appliqué à une icône de 32 pixels.
Un point d'attention : le SVG d'un favicon doit être autonome. Une police externe, une image distante ou un script ne seront pas chargés dans ce contexte. Les textes doivent être convertis en tracés.
Ce que le mode sombre ne couvre pas
La variante sombre concerne le favicon des navigateurs de bureau. Elle ne s'applique ni à l'icône Apple Touch, qui est un PNG opaque figé, ni aux icônes du manifeste web, qu'Android affiche sur son propre fond.
Le support n'est pas universel non plus : les navigateurs basés sur Chromium et Firefox lisent le SVG adaptatif, Safari reste en retrait selon les versions. Ce n'est pas grave, puisque le repli sur le .ico est automatique.
Concevez donc votre icône claire comme le cas par défaut, celui que verront tous les visiteurs, et traitez la variante sombre comme un raffinement pour ceux dont le navigateur sait la lire.