Si has pasado horas perfeccionando el logo negro de tu marca solo para darte cuenta de que es invisible para el 80% de los usuarios que usan el modo oscuro, no estás solo. Todos hemos estado ahí: abriendo una nueva compilación en una pestaña del navegador con tema oscuro solo para ver un cuadrado hueco y vacío donde debería estar un icono profesional. Parece roto, y en 2026, es una señal de una implementación perezosa.

Proporcionar soporte de modo oscuro para el favicon no es solo una cuestión de estética; se trata de accesibilidad y coherencia de marca. Cuando un usuario cambia el tema de su sistema, tu sitio debería responder al instante. Aunque técnicamente podrías usar JavaScript para intercambiar las etiquetas <link>, es un enfoque torpe que a menudo provoca un parpadeo visible. La forma moderna y profesional de manejar esto es a través de SVG.

Requisitos previos

Antes de empezar, necesitas una versión SVG de tu icono. Si todavía usas solo archivos ICO o PNG, te recomiendo encarecidamente que consultes nuestra guía sobre SVG Favicons para entender por qué son el estándar de oro. También querrás asegurarte de que el diseño de tu icono esté lo suficientemente simplificado como para ser legible a 16x16 píxeles, como discutimos en nuestra comparación de favicon vs logo.

Paso 1: El truco del estilo interno SVG

El secreto para un soporte de modo oscuro sin interrupciones reside dentro del propio archivo SVG. Dado que SVG es esencialmente XML, podemos incrustar un bloque <style> directamente dentro de él. Esto permite que el navegador evalúe las consultas de medios CSS específicamente para el icono.

Abre tu archivo SVG en un editor de código y añade un bloque de estilo como este:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="..." />
</svg>

En este ejemplo, el icono por defecto es negro, pero cambia automáticamente a blanco cuando el sistema del usuario está en modo oscuro. Esto es exactamente lo que hacen marcas como GitHub para asegurar que su Octocat permanezca visible independientemente del tema de la interfaz de usuario del navegador.

Paso 2: Implementando el HTML

Una vez que tu SVG esté listo, necesitas indicarle al navegador que lo use. En tu sección <head>, añade la siguiente línea. Ten en cuenta que aún mantenemos el favicon.ico estándar como respaldo para entornos más antiguos, pero los navegadores modernos priorizarán el SVG.

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

Al usar type="image/svg+xml", le indicas al navegador que este archivo es capaz de tener estilos internos. Si quieres profundizar en el código específico para diferentes formatos, consulta nuestra guía HTML para favicons.

Paso 3: Manejo de las pestañas fijadas de Safari

Safari de Apple maneja las cosas de manera un poco diferente. Aunque soporta favicons SVG, también utiliza un "mask-icon" específico para las pestañas fijadas. Para asegurar que tu marca se vea genial también allí, debes definir una versión monocromática de tu icono.

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

El atributo color define el color de relleno del icono cuando la pestaña está activa. Este es un archivo separado de tu SVG adaptativo principal, pero es un paso necesario para una experiencia verdaderamente pulida.

Errores comunes

El mayor dolor de cabeza con el soporte de modo oscuro para el favicon es el almacenamiento en caché del navegador. Los navegadores son notoriamente agresivos al almacenar en caché los favicons. Si actualizas tu SVG y no ves los cambios, intenta añadir una cadena de versión a la URL (por ejemplo, favicon.svg?v=2) o borra completamente los datos del sitio de tu navegador.

Otro error común es complicar demasiado el SVG. Mantén tus rutas limpias. Si tu SVG tiene atributos fill codificados en cada elemento de ruta, el bloque CSS que añadimos en el Paso 1 podría ser ignorado debido a las reglas de especificidad de CSS. Usa clases o apunta directamente a las etiquetas para asegurar que la media query prevalezca.

Mi recomendación

No te molestes con complejos listeners de tema de JavaScript para cambiar tu favicon. Es frágil e innecesario. Quédate con el método SVG prefers-color-scheme. Es nativo, de alto rendimiento y no requiere mantenimiento una vez desplegado. Si necesitas generar rápidamente estos archivos a partir de una imagen existente, puedes usar Mzu favicondl para tener tus activos base listos antes de añadir la lógica CSS personalizada.