web-dev-qa-db-fra.com

Est-il possible d'utiliser un favicon différent pour les navigateurs prenant en charge la couleur de thème?

Existe-t-il un moyen de définir un favicon différent pour les navigateurs prenant en charge la couleur de thème, via la balise Meta ou manifest.json? J'ai une barre de thème noir de jais, mais un favicon principalement noir pour une utilisation sur les navigateurs de bureau. J'aimerais avoir un favicon blanc alternatif pour les navigateurs mobiles, mais je ne veux pas faire l'hypothèse que le navigateur mobile === prend en charge la couleur du thème, car ce ne sera pas toujours le cas.

Exemple de favicon de bureau:

Desktop favicon

Exemple de favicon mobile: Mobile favicon

htmlmanifestmeta-tagsfavicon
14
richardwestenra

Le thème du navigateur est accessible via le prefers-color-scheme requête média. Malheureusement, comme le favicon n'est pas un élément de page, vous ne pouvez pas utiliser la requête multimédia dans un fichier CSS pour, par exemple, basculer entre deux images.

La solution est de combiner prefers-color-scheme avec SVG, qui peut intégrer du CSS. Déclarez un favicon SVG:

<link rel="icon" href="my_icon.svg">

Et utilisez la requête média dans le SVG lui-même:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: yellow;
      stroke: black;
      stroke-width: 3px;
    }
    @media (prefers-color-scheme: dark) {
      circle {
        fill: black;
        stroke: yellow;
      }
    }
  </style>
  <circle cx="50" cy="50" r="47"/>
</svg>

Source sur tomoyac.com

Le favicon SVG est toujours une fonctionnalité avancée. Il est déjà pris en charge par Firefox et par Chrome , mais d'autres navigateurs ne le prennent pas encore en charge .

3
philippe_b