Favicon SVG: compatibilidad, modo oscuro y respaldos
Un favicon SVG es un icono vectorial referenciado con una etiqueta link de tipo image/svg+xml, de modo que un solo archivo se renderiza con nitidez a cualquier tamaño en vez de un PNG por tamaño. Como es un documento, puede llevar una media query prefers-color-scheme y dibujarse de forma distinta en modo oscuro. La compatibilidad no es universal: Chrome, Edge y Firefox actuales lo renderizan, mientras que Safari no lo usa para el icono de la pestaña, así que mantén un respaldo en PNG o ICO junto a él.
Un archivo en vez de un conjunto
Un favicon rasterizado es una decisión de tamaño tomada en el momento de exportar. Un SVG no lo es: el navegador lo rasteriza al tamaño que necesita cada superficie, así que una pestaña a 16 píxeles y una barra de marcadores a 32 obtienen el mismo resultado nítido de un único archivo que suele ser más pequeño que un solo PNG.
La pega es que la compatibilidad es dispar, y un favicon SVG no reemplaza al resto del conjunto de iconos. Las superficies de app instalada en Android e iOS siguen queriendo PNG, y Safari todavía necesita la vía rasterizada para el icono de su pestaña. Trata el SVG como una mejora superpuesta sobre una configuración de PNG e ICO que ya funciona.
Dónde funciona un favicon SVG
| Superficie | Comportamiento |
|---|---|
| Pestaña de Chrome / Edge | Renderiza el SVG |
| Pestaña de Firefox | Renderiza el SVG |
| Pestaña de Safari | No lo usa; recurre a tu PNG o ICO |
| Pantalla de inicio de iOS | Usa el PNG apple-touch-icon, nunca el SVG |
| Instalación de Android / PWA | Usa los PNG del manifiesto de aplicación web |
Las etiquetas del head
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">Los navegadores que entienden image/svg+xml toman el SVG; el resto recurre al ICO. Sin necesidad de detectar el user-agent.
Un favicon que sigue el modo oscuro
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #111111 }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff }
}
</style>
<path d="M20 80 L50 20 L80 80 Z" />
</svg>Los estilos deben estar dentro del SVG. Una hoja de estilos externa no se carga para un favicon. Los navegadores compatibles con favicons SVG generalmente respetan esto; los que no, simplemente usan el respaldo rasterizado.
Preguntas frecuentes sobre favicon SVG
¿Puede un favicon SVG reemplazar a favicon.ico?
No del todo. Cualquier cosa que solicite /favicon.ico por ruta (y todo lo que no renderice favicons SVG) necesita el archivo rasterizado. El SVG es un añadido, no un reemplazo.
¿Por qué no aparece mi favicon SVG en Safari?
Safari no usa SVG para el icono de la pestaña por el momento. Recurre al icono rasterizado que hayas declarado, así que la solución es asegurarte de que ese respaldo existe y se ve bien.
¿Es rel="mask-icon" lo mismo?
No. mask-icon es una función aparte de Safari que toma un SVG monocromo plano y lo tiñe para las pestañas ancladas. Ignora los colores de tu archivo y no afecta al icono normal de la pestaña.