Favicons en modo oscuro (prefers-color-scheme)
Un favicon en modo oscuro cambia con el ajuste claro u oscuro del sistema operativo para que siga siendo legible frente a un chrome de navegador oscuro o claro. Funcionan dos enfoques: un favicon SVG que contiene una media query prefers-color-scheme que se recolorea a sí mismo, o dos archivos PNG declarados con media="(prefers-color-scheme: dark)" en sus etiquetas link. Un único icono de tono medio que se lea en ambos es la alternativa más sencilla.
Dos formas de hacer que responda
El enfoque más limpio es un favicon SVG con una media query prefers-color-scheme en sus propios estilos, de modo que el único archivo se recolorea a sí mismo cuando el SO cambia a oscuro. Los navegadores que renderizan favicons SVG y respetan la media query (incluidos Safari y Firefox) captan el cambio sin etiquetas adicionales.
La alternativa son dos archivos rasterizados: un icono normal y uno optimizado para oscuro, cada uno en una etiqueta link con un atributo media. La compatibilidad con el cambio de favicons PNG por media es menos consistente que la vía del SVG, así que mantén siempre un icono por defecto que se sostenga por sí solo.
El enfoque de dos archivos
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="icon" href="/favicon.ico" sizes="any" />El favicon.ico simple es el respaldo para cualquier cosa que ignore el atributo media.
Preguntas frecuentes sobre el favicon en modo oscuro
¿Cómo hago un favicon en modo oscuro?
O bien pones una media query prefers-color-scheme dentro de un favicon SVG para que se recolore a sí mismo, o declaras dos PNG con media="(prefers-color-scheme: dark)" y light en sus etiquetas link. Mantén un favicon.ico simple como respaldo.
¿El atributo media en los favicons funciona en todas partes?
No. La compatibilidad con el cambio de favicons por prefers-color-scheme es dispar entre navegadores, por eso mantienes siempre un icono por defecto que funciona sin importar el tema.
¿Media query en SVG o dos PNG?
La vía del SVG es un solo archivo y generalmente tiene mejor soporte para el cambio de tema. Dos PNG dan control a nivel de píxel por tema pero dependen de un manejo del atributo media menos consistente.