Si tu web tiene soporte para modo oscuro, puedes mostrar un favicon diferente según el esquema de colores del navegador con esta sencilla configuración en HTML.
Ejemplo de configuración
<!-- Favicon para el modo claro --> <link rel="icon" type="image/png" href="favicon.png"> <!-- Favicon para el modo oscuro --> <link rel="icon" type="image/png" href="favicon-dark.png" media="(prefers-color-scheme: dark)">
¿Qué hace esto?
- El primer enlace (
favicon.png) se muestra en el modo claro. - El segundo enlace (
favicon-dark.png) usa la media queryprefers-color-scheme: darkpara aplicarse cuando el modo oscuro esté activado.
Este enfoque asegura que tu favicon se adapte automáticamente según el esquema de colores del usuario, mejorando la experiencia visual de tu web.
Gracias a Midudev por el trucazo.