Un logo negro sobre fondo transparente queda perfecto en una pestaña clara y resulta invisible en una oscura. El formato ICO no puede adaptarse, pero el favicon SVG sí: incluye una regla CSS que cambia los colores según el tema del navegador.
El problema: un archivo, dos fondos
Desde que los navegadores siguen el tema del sistema, dos visitantes de la misma página pueden tener la barra de pestañas casi blanca o casi negra. Un favicon monocromo diseñado para uno resulta ilegible para el otro.
Muchos sitios evitan el problema añadiendo un fondo opaco de color a su icono. Funciona, pero el icono se convierte en una pastilla visualmente pesada, mientras que las grandes marcas mantienen un símbolo sin fondo.
La mejor respuesta es dejar que el navegador elija, y eso es posible sin JavaScript ni detección en el servidor.
Cómo funciona el SVG adaptable
Un archivo SVG es un documento, no una imagen fija: puede contener una etiqueta style y, por tanto, consultas de medios. Al incluir una regla prefers-color-scheme: dark, se redefine el color de relleno de los trazados cuando el navegador usa el tema oscuro.
En concreto, el SVG declara un color predeterminado para el tema claro y después una regla que lo sustituye en el tema oscuro. El navegador aplica el adecuado al renderizar y actualiza la pestaña inmediatamente si el visitante cambia de tema.
El mismo mecanismo permite ir más allá de una simple inversión: puedes mostrar un dibujo completamente distinto, por ejemplo, un símbolo sin fondo en el tema claro y una pastilla rellena en el oscuro.
Declarar el SVG junto al .ico
El SVG se declara con link rel="icon" type="image/svg+xml" href="/favicon.svg". Los navegadores que lo entienden lo prefieren a los demás formatos y los que lo ignoran recurren al favicon.ico de la raíz.
No tienes que eliminar nada: ambos archivos conviven y cada uno cubre los clientes que el otro no admite. Es el principio de mejora progresiva aplicado a un icono de 32 píxeles.
Hay un detalle importante: el SVG de un favicon debe ser autónomo. En este contexto no se cargarán fuentes externas, imágenes remotas ni scripts. Los textos deben convertirse en trazados.
Qué no cubre el modo oscuro
La variante oscura afecta al favicon de los navegadores de escritorio. No se aplica al icono Apple Touch, que es un PNG opaco fijo, ni a los iconos del manifiesto web, que Android muestra sobre su propio fondo.
La compatibilidad tampoco es universal: los navegadores basados en Chromium y Firefox leen el SVG adaptable; Safari va por detrás según la versión. No es un problema grave porque la alternativa .ico se usa automáticamente.
Diseña tu icono claro como opción predeterminada, la que verán todos los visitantes, y considera la variante oscura una mejora para quienes tengan un navegador compatible.
Fuentes primarias
Preguntas frecuentes
¿Puede favicon.ico adaptarse al modo oscuro?
No. El formato ICO almacena imágenes fijas de mapa de bits, sin ninguna noción de tema. Solo SVG puede incluir una consulta de medios, por eso el conjunto moderno contiene ambos formatos.
¿Hacen falta dos archivos SVG, uno claro y otro oscuro?
No, basta un solo archivo. Las dos variantes conviven en el mismo SVG, separadas por la consulta de medios prefers-color-scheme, lo que evita una solicitud adicional y cualquier código de detección.
¿Cómo pruebo el aspecto con el tema oscuro?
Cambia el tema de tu sistema operativo y recarga la pestaña. En el generador, las vistas previas de las pestañas clara y oscura se muestran juntas, por lo que no hace falta alternar entre ellas.