Favicon en modo oscuro: iconos adaptativos para claro y oscuro (2026)

Un favicon oscuro se ve genial en una pestaña clara — y desaparece en una pestaña oscura. La solución es un favicon adaptativo: un icono para el modo claro, otro para el oscuro. Esta guía muestra la técnica de media queries en SVG, la etiqueta meta theme-color y un fallback JS para navegadores antiguos.

La técnica de media queries en SVG (recomendada)

Los favicons SVG pueden incrustar CSS que responde a prefers-color-scheme. El navegador elige automáticamente los colores correctos según el tema del sistema operativo o del navegador del usuario — sin necesidad de JavaScript.

Crea un favicon.svg así:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .bg { fill: #1a1a1a; }
      .logo { fill: #ffffff; }
    }
    .bg { fill: #ffffff; }
    .logo { fill: #1a1a1a; }
  </style>
  <rect class="bg" width="32" height="32" rx="6" />
  <path class="logo" d="M8 16 L16 8 L24 16 L16 24 Z" />
</svg>

Luego decláralo en tu HTML:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

En una pestaña clara el icono se renderiza oscuro sobre blanco; en una pestaña oscura cambia a claro sobre oscuro. El navegador gestiona el cambio al instante.

Advertencia sobre Safari: Safari 26 (2025) por fin renderiza favicons SVG, pero ignora las media queries dentro de ellos — tu variante de modo oscuro no cambiará ahí. Esto está registrado como bug de WebKit #309949. Consulta ¿El favicon en modo oscuro no funciona en Safari? → para el diagnóstico y las soluciones. Y como siempre, publica un respaldo PNG/ICO — consulta la guía de SVG vs PNG.

La etiqueta meta theme-color

Mientras te adaptas al modo oscuro, configura también el color del chrome del navegador con dos etiquetas meta theme-color:

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a1a">

Esto colorea el fondo de la pestaña/barra de herramientas del navegador en Safari y Chrome móviles, complementando tu favicon adaptativo.

Fallback JS para navegadores antiguos

Si necesitas dar soporte a navegadores que no respetan las media queries en SVG, puedes intercambiar dos favicons PNG usando JavaScript y matchMedia:

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

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

Esto funciona en todas partes, pero requiere publicar dos PNG separados y un pequeño script. Prefiere el enfoque SVG cuando puedas.

Consejos de diseño para favicons adaptativos

Usa contornos, no rellenos. Un logo delineado se adapta mejor que una forma sólida, porque se lee sobre cualquier fondo.
Prueba ambos modos. Alterna tu sistema entre claro y oscuro y revisa ambas pestañas del navegador.
Evita rellenos de blanco o negro puros — el blanco roto (#f5f5f5) y el casi negro (#1a1a1a) se ven más suaves.
Mantén el SVG pequeño. El CSS inline añade bytes; mantén el path simple.

Soporte de navegadores para favicons SVG

Actualizado según el cambio de Baseline de septiembre de 2025 — Safari 26 ahora renderiza favicons SVG, pero no sus media queries:

Navegador	Favicon SVG	Media query dentro del SVG
Chrome (escritorio & Android)	✅	✅
Firefox	✅	✅
Edge	✅	✅
Safari 26+ (escritorio)	✅ (novedad de 2025)	❌ bug de WebKit #309949
Safari en iOS	❌ (usa apple-touch-icon)	❌

La conclusión: publica el SVG para los navegadores modernos, más un respaldo PNG/ICO para todo lo demás — y usa el intercambio JS de abajo si el soporte de modo oscuro de Safari importa para tu audiencia.

Configuración completa de favicon para modo oscuro

<!-- Adaptive SVG for modern browsers -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallbacks -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Browser chrome color -->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a1a">