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 claro.

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

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

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

Podemos incrustar CSS en una imagen SVG.

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

Aquí está el SVG que utilicé como favicono:

svg viewBox="0 0 37 45" fill="none" 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 rellené el color de la ruta con el #ccccolor en modo claro y #fffen modo oscuro.

Lo guardé como .svgarchivo y luego lo usé como favicon en Gatsby.

Tips de HTML

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Cambiar el favicon en modo oscuro

Tengo mi Mac configurado para cambiar automáticamente entre el modo oscuro y claro. Cómo mostrar un favicon diferente en modo oscuro o claro Cómo mostrar un

programar

es

2025-01-09

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente