¿El favicon en modo oscuro no funciona en Safari? El bug de WebKit y sus soluciones

Seguiste la guía del favicon adaptativo: tu favicon.svg incrusta una media query prefers-color-scheme y cambia perfectamente entre claro y oscuro en Chrome y Firefox. Luego abres el sitio en Safari y… nada. El icono se queda en su tema claro sobre una pestaña oscura. Aquí te explico por qué ocurre, cómo confirmar que es el bug (y no tu marcado) y las soluciones alternativas que realmente funcionan hoy.

La causa raíz: bug de WebKit #309949

Safari 26, lanzado a finales de 2025, por fin añadió soporte para favicons SVG — hasta entonces Safari era el último rezagado. Pero la implementación ignora las media queries de CSS incrustadas dentro del SVG. Tu bloqueo prefers-color-scheme: dark se analiza pero nunca se aplica, así que Safari siempre renderiza la variante por defecto (clara) del icono.

Esto está registrado como WebKit Bug #309949 (también afecta a WebKitGTK). Está abierto desde principios de 2026 sin ninguna corrección publicada. Chrome y Firefox no están afectados — evalúan correctamente las media queries dentro de los favicons SVG.

Confirma que es el bug, no tu SVG

Antes de culpar a WebKit, descarta los sospechosos habituales:

Prueba el mismo archivo en Chrome o Firefox. Si el icono cambia ahí, tu SVG es correcto — es el bug de Safari.
Comprueba que la media query está dentro del propio SVG. Safari (y cualquier navegador) solo respeta el CSS incrustado en el archivo favicon.svg — una hoja de estilos de tu página no puede dar estilo al favicon.
Verifica la etiqueta link: <link rel="icon" type="image/svg+xml" href="/favicon.svg"> — y que el SVG tenga viewBox para que escale.
Borra la caché de favicons. Safari almacena los favicons de forma agresiva; un icono obsoleto puede hacerse pasar por un bug. Prueba en una ventana privada.

Si el icono no cambia en ningún sitio, arregla primero el SVG — nuestra guía de favicon en modo oscuro cubre el marcado correcto.

Solución 1: diseña un icono neutro en cuanto al tema (recomendado)

La corrección más robusta es no depender en absoluto de la media query. Diseña el SVG por defecto para que se lea bien sobre fondos de pestaña claros y oscuros:

Pon tu logo sobre un fondo de cuadrado redondeado en un color de marca que funcione en ambos tonos de pestaña (los tonos medios ganan al blanco o negro puros).
Prefiere los contornos a los rellenos sólidos finos — sobreviven en ambos fondos.
Evita las formas blancas puras (invisibles en pestañas claras) y el negro puro (invisible en pestañas oscuras). Usa un blanco roto como #f5f5f5 o un casi negro como #1a1a1a solo contra una placa de fondo contrastante.

Los usuarios de Chrome y Firefox siguen obteniendo la versión adaptativa mediante la media query; los usuarios de Safari reciben un icono neutro que nunca desaparece. Todos ven algo aceptable.

Solución 2: intercambio con JavaScript y matchMedia

Si la fidelidad en Safari de verdad importa, intercambia en tiempo de ejecución entre dos favicons PNG. Esto omite por completo el renderizado SVG y funciona en todos los navegadores:

function setFavicon() {
  const dark = window.matchMedia('(prefers-color-scheme: dark)').matches
  const icon = document.querySelector("link[rel='icon'][type='image/png']")
  if (icon) {
    icon.href = dark ? '/favicon-dark.png' : '/favicon-light.png'
  }
}

setFavicon()
window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', setFavicon)

Declara un link de icono PNG junto a tu SVG, y mantén el SVG primero para que los navegadores modernos que lo gestionan de forma nativa no lo descarguen dos veces. El coste son dos PNG extra y unas líneas de script.

Qué no hacer

No elimines los respaldos PNG/ICO. Safari en iOS no usa favicons SVG en absoluto (quiere apple-touch-icon.png), y los WebView antiguos de Android también ignoran SVG.
No sirvas dos SVG con un atributo media en la etiqueta link. <link rel="icon" media="(prefers-color-scheme: dark)"> no es fiable entre navegadores — el enfoque de CSS incrustado es el estándar.
No lo reportes como bug propio. Es conocido y público — marca con una estrella #309949 y vuelve a probar cuando un Safari Technology Preview publique una corrección.

El estado actual

Navegador	Favicon SVG	Modo oscuro mediante CSS incrustado
Chrome / Edge	✅	✅
Firefox	✅	✅
Safari 26+ (macOS)	✅	❌ bug #309949
Safari en iOS	❌	❌