Vous voulez un favicon orange.

Vous ne pouvez pas avoir un favicon blanc, car, dans de nombreuses situations, vous ne pourrez pas du tout voir le truc. Voici un onglet Chrome par défaut lorsque macOS est en mode Light.

j’ai fait le favicon #eee ici pour que vous puissiez voir le favicon du tout.

Vous ne pouvez pas avoir un favicon noir, car, dans de nombreuses situations, vous ne pourrez pas du tout voir le truc. Voici un onglet Chrome par défaut lorsque macOS est en mode sombre :

L’onglet n’est pas noir pur, vous pouvez donc voir le favicon noir pur.

Pas de problème, dites-vous, je ferai en sorte que le favicon (SVG) réponde à la préférence du mode sombre :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.3 24.29">
  <style>
    @media (prefers-color-scheme: dark) {
      path {
        fill: white;
      }
    }
  </style> 

 ...
Code language: HTML, XML (xml)

Bonne idée, et cela fonctionne en fait pour changer un remplissage de favicon SVG correctement configuré, mais cela n’aide pas beaucoup dans la vraie vie. Les onglets Chrome ne sont pas seul sombres en raison d’une préférence système, ils peuvent également devenir sombres car l’onglet est ouvert dans une fenêtre de navigation privée. Il n’y a pas @media demande pour ça ! Firefox fait quelque chose de similaire en ce moment : lorsque macOS est en mode clair, vous obtenez des onglets clairs dans les fenêtres normales et des onglets sombres dans les fenêtres privées.

Conclusion : vous n’avez aucune idée de la couleur de l’onglet derrière un favicon. J’utilise Arc, qui vous encourage à péter avec des thèmes, ce qui affecte la couleur d’arrière-plan derrière les favicons. Je pense que tous les navigateurs prennent en charge les thèmes, ce qui prouve en outre que vous ne pouvez pas compter sur les couleurs impliquées.

Donc : votre favicon doit pouvoir résister n’importe quel couleur derrière. Cela se fait souvent en fournissant un arrière-plan de couleur unie directement dans le favicon lui-même. Les favicons comme ceux-ci doivent être visibles comme prévu quoi qu’il arrive :

Icônes favorites MDN et CodePen.

Si vous voulez un favicon coloré et en forme, vous avez besoin d’une couleur qui fonctionne aussi bien sur l’obscurité que sur la lumière. Comme l’orange !

Eh bien, jusqu’à ce que Safari décide de devenir bizarre.

L’heure de la sieste.