Le favicon est la seule image que votre site affiche dans un endroit que vous ne contrôlez pas : onglets du navigateur, barres de favoris et listes d'historique, chacun avec sa propre couleur d'arrière-plan. Un favicon SVG peut répondre à cet arrière-plan au lieu de le combattre.

<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">
<link rel="icon" href="/favicon.ico" sizes="any">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    circle { fill: #111111; text { fill: #ffffff; } }
    @media (prefers-color-scheme: dark) {
      circle { fill: #ffffff; }
      text { fill: #111111; }
    }
  </style>
  <circle cx="32" cy="32" r="30"/>
  <text x="32" y="42" text-anchor="middle"
        font-family="Georgia" font-size="30">T</text>
</svg>

Pourquoi cela fonctionne et que respecter

  • Le bloc de style à l'intérieur du SVG est une véritable feuille de style, donc la requête multimédia de schéma de couleurs préféré fonctionne exactement comme sur une page.
  • Échelles de forme vectorielle : un fichier sert un onglet de 16 px, un signet de 32 px, un écran d'accueil de téléphone de 180 px sans image par étape.
  • Les solutions de secours PNG et ICO dans la liste de liens gèrent les navigateurs et les contextes qui ignorent SVG ; l'ordre là-bas a le dernier mot en matière de support hérité.
  • Gardez le contraste de l'icône vérifié par rapport aux deux couleurs des onglets, clair et foncé ; un trait neutre par rapport à la marque est généralement préférable à un remplissage complet.

La liste de contrôle honnête

  1. Dessinez à 64 par 64 avec le glyphe correctement centré ; tester à 16 ans avant de faire la fête, les tabs sont l'appétit auquel il faut survivre.
  2. Intégrez les requêtes multimédias, n'envoyez aucun CSS externe dans le fichier d'icône ; il doit se charger de manière autonome.
  3. Conservez le masque hérité et les étapes de secours PNG dans votre étape de construction afin que chaque version mette à jour les trois fichiers ensemble.
  4. Vérifiez dans un navigateur avec des échantillons de couleurs d'onglets : un onglet clair et un sombre, plus le gris de la barre de favoris.

Le résumé très gacor : le favicon est passé d'un produit phare raster pour chaque version de navigateur à un SVG réactif et une note héritée. Une ligne de soins en mode sombre que la plupart des sites ignorent.