Historique de la page

...

Nous vous conseillons fortement le format svg pour cette icone, car ce format permet de gérer facilement des variantes de couleurs pour un navigateur Internet en mode sombre. En regardant le fichier main/static/img/logoPodpod_favicon.svg par exemple, vous verrez les instructions suivantes :

...

Ces dernières permettent de gérer 2 jeux de couleurs différents dans le même logo, permettant de conserver un bon contraste quel que soit la couleur de fond. N'hésitez-pas à vous en inspirer si vous créez votre propre favicon.svg.

Utiliser la même image comme logo et comme favicon

C'est tout à fait possible d'utiliser la même image, mais si votre image comprend 2 jeux de couleurs, je vous invite à ajouter les lignes CSS suivantes (ou à vous en inspirer) dans votre fichier CSS personalisé pour que votre image s'affiche toujours contrastée sur Pod :

/* When your logo.svg already switch color on browser color-scheme: dark */
@media (prefers-color-scheme: light) {
  [data-theme="dark"] .pod-navbar__brand img{
    filter: invert(100%) saturate(2908%) hue-rotate(27deg) brightness(121%) contrast(99%);
  }
}
@media (prefers-color-scheme: dark) {
  [data-theme="light"] .pod-navbar__brand img{
    filter: invert(100%) saturate(2908%) hue-rotate(27deg) brightness(121%) contrast(99%);
  }
}

Plus de personnalisation

Voir cette page de configuration pour plus d'infos.