Favicons en Modo Oscuro: Crea Uno Que Se Adapte
Una marca azul marino desaparece contra una barra de pestañas oscura. Puedes solucionarlo desde un solo SVG, o desde dos PNG, pero aun así mantienes un icono por defecto debajo.
Qué cambia realmente el modo oscuro
La barra de pestañas del navegador es clara en modo claro y oscura en modo oscuro. Tu favicon no cambia con ella a menos que lo hagas cambiar. Una marca que se ve nítida sobre blanco puede desaparecer en una pestaña casi negra, y lo contrario ocurre con una marca clara sobre un chrome claro.
Tienes dos formas de responder a esto. Publicar un único SVG que se recolorea, o publicar dos PNG y dejar que el navegador elija según la configuración del sistema. La vía del SVG es un archivo y una petición. La vía del PNG funciona en más clientes, pero su soporte para favicons cambiados por media es irregular, así que depende más del fallback.
Método A: un SVG que se invierte solo
Un favicon SVG puede llevar su propio CSS. Coloca una media query prefers-color-scheme: dark dentro del SVG y cambia el fill ahí. El navegador lee la configuración del sistema y repinta el icono sin un segundo archivo y sin link tag extra.
Este es el método al que recurrir primero. Es un único archivo, se mantiene nítido en cada tamaño, y es el único enfoque en el que un solo recurso cubre ambos temas.
El SVG, con los fallbacks
<!-- In your <head>: SVG first, then the raster fallback -->
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- icon.svg, with the theme rule baked in -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
path { fill: #f5f5f5; }
}
</style>
<path d="M6 6h20v20H6z" />
</svg>Un navegador que lee SVG usa la primera línea y respeta la media query. Todo lo demás recurre al favicon.ico.
Método B: dos PNG en link tags con media
Si no puedes usar SVG, exporta dos PNG (digamos, una versión oscura-sobre-clara y una versión clara-sobre-oscura) e indica cada una con un atributo media en su link tag. El navegador carga la que corresponde al tema actual.
El soporte para esto es irregular. Algunos navegadores ignoran el atributo media en los links de icono y simplemente toman el primero que entienden. Por eso importa la última línea: un favicon.ico simple sin condición de media es el valor por defecto al que cualquier cliente puede recurrir.
La configuración con dos PNG
<link rel="icon" type="image/png" href="/favicon-dark.png"
media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" href="/favicon-light.png"
media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon.ico" sizes="any">Mantén el favicon.ico incondicional al final, para que un navegador que ignore las pistas de media aún tenga un icono.
La vía perezosa que simplemente funciona
Si nada de esto vale el esfuerzo, usa una única marca de tono medio. Un color con suficiente contraste para leerse tanto en un chrome claro como oscuro (un color de marca saturado, ni casi negro ni casi blanco) es legible en ambos temas desde un único archivo.
Este es el valor por defecto pragmático. Pierdes la coincidencia perfecta con cada tema, pero ganas un recurso que nunca desaparece y ninguna condición de media que puedas equivocar.
Preguntas frecuentes
¿Cómo hago que un favicon cambie en modo oscuro?
Usa un favicon SVG con una media query prefers-color-scheme: dark dentro de sus estilos que cambie el color del fill, o publica dos PNG en link tags con media. Mantén un favicon.ico simple como valor por defecto en cualquier caso.
¿Los favicons de modo oscuro funcionan en todos los navegadores?
Los favicons SVG con una media query interna tienen buen soporte en los navegadores modernos. Los favicons PNG cambiados por media son menos fiables, así que incluye siempre un icono de fallback incondicional.
¿Puedo saltarme el modo oscuro y usar un único favicon?
Sí. Elige una marca de tono medio con suficiente contraste para leerse tanto en pestañas claras como oscuras. Es un único archivo y nunca desaparece contra ninguno de los temas.
¿El favicon.ico necesita cambiar para el modo oscuro?
No. El favicon.ico es tu fallback por defecto para clientes y crawlers más antiguos. Déjalo como una única versión legible y gestiona el cambio de tema con los links SVG o PNG que están encima de él.