Cambiar el favicon en modo oscuro

Cómo mostrar un favicon diferente en modo oscuro o claro

Tengo mi Mac configurado para cambiar automáticamente entre el modo oscuro y el claro.

Comencé a construir un nuevo sitio web cuando en algún momento me di cuenta de que puse una imagen en blanco como favicon, ¡y en el modo de luz era casi invisible!

Entonces comencé a investigar posibles formas de agregar un favicon en modo oscuro y uno diferente en modo claro.

Resulta que no hay (todavía) una forma de hacerlo para imágenes de mapa de bits PNG / JPG, pero podemos usar unaSVGtruco de imágenes vectoriales para esto.

Podemos incrustar CSS en una imagen SVG.

Si la imagen es lo suficientemente simple como para identificar un color y cambiarlo en modo oscuro, podemos tener un color diferente para los 2 modos.

Utilicé este truco enhttps://prototyped.dev(puedes comprobar cómo cambia el favicon).

Aquí está el SVG que usé como favicon:

<svg width="37" height="45" viewBox="0 0 37 45" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style>
    path {
      fill: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      path {
          fill: #fff;
      }
    }
  </style>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M31.8831 2.04389C25.2462 2.72205 20 11.1737 20 21.5C20 32.2696 25.7062 41 32.7451 41C33.9877 41 35.2047 40.7279 36.3664 40.2206C32.5452 43.2149 27.7311 45 22.5 45C10.0736 45 0 34.9264 0 22.5C0 10.0736 10.0736 0 22.5 0C25.849 0 29.0271 0.731675 31.8831 2.04389Z" />
</svg>

La imagen SVG es muy simple, es una media luna que diseñé en Figma y exporté como SVG.

Luego llené el color de la ruta con el#ccccolor en modo claro, y#fffen modo oscuro.

Lo guardé como un.svgarchivo y luego lo usó como elfavicon en Gatsby.

Descarga mi gratisManual HTML


Más tutoriales de HTML: