Written by David Kim — Frontend Developer & WordPress consultant. More about me →
El sitio de un cliente se lanzó con un precioso logo negro. Se veía perfecto en el encabezado blanco. Luego lo abrí por la noche con el modo oscuro activado —el favicon era totalmente invisible sobre la pestaña oscura del navegador. Nadie había pensado en probarlo. Aquí te explico cómo solucionarlo en cada proyecto desde entonces.
Chrome, Firefox y Safari admiten el modo oscuro a nivel de sistema. Cuando un usuario cambia al modo oscuro, sus pestañas del navegador también se oscurecen. Si tu favicon es un logo oscuro con fondo transparente, desaparece. Si es un logo claro, desaparece en el modo claro. Necesitas ambas versiones.
El enfoque más limpio —un único archivo SVG que se adapta automáticamente. Según la documentación de prefers-color-scheme de MDN, los SVG admiten consultas de medios CSS internamente:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <style> .light { display: block; } .dark { display: none; } @media (prefers-color-scheme: dark) { .light { display: none; } .dark { display: block; } } </style> <rect class="light" fill="#111" .../> <rect class="dark" fill="#fff" .../> </svg> Luego haz referencia a él directamente: <link rel="icon" href="/favicon.svg" type="image/svg+xml">. El navegador se encarga del cambio. Lo uso en todos los proyectos nuevos donde los favicons SVG sean compatibles.
Para sitios que requieren respaldo en PNG, declara dos favicons con consultas de medios en la etiqueta <link>:
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)"> <link rel="icon" href="/fa