Favicons SVG: Por qué son mejores y cómo usarlos realmente

El tema con los favicons es este: hemos estado atrapados con archivos ICO pixelados desde 1999. Veinticinco años de pequeños iconos borrosos. Pero ¿los favicons SVG? Honestamente son bastante increíbles, y la mayoría de los desarrolladores todavía no los usan.

Déjame mostrarte por qué podrías querer cambiar, y más importante, cómo hacerlo sin romper las cosas para usuarios en navegadores antiguos.

Por qué los favicons SVG realmente valen la pena

Escalado infinito sin borrosidad

¿Recuerdas crear cinco tamaños diferentes de PNG para tu favicon? 16x16, 32x32, 48x48... se vuelve tedioso rápido. Con SVG, creas un archivo. Eso es todo. Se ve nítido ya sea que se muestre a 16 píxeles en una pestaña del navegador o a 512 píxeles en una pantalla de splash de PWA.

Un favicon SVG típico pesa 300-800 bytes. Compara eso con un paquete de favicon PNG de 2-5 KB. Eso es una reducción del 85-95% en tamaño. No es enorme en términos absolutos, pero cada byte cuenta cuando estás optimizando.

Modo oscuro que simplemente funciona

Esta es la característica estrella. Con un favicon SVG, puedes incrustar media queries CSS directamente en el archivo. Cuando un usuario cambia al modo oscuro, tu favicon se adapta automáticamente.

Así se ve en la práctica:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M16 4L4 28h24L16 4z"/>
</svg>

Eso es un triángulo simple que es oscuro en fondos claros y claro en fondos oscuros. No se requiere JavaScript. No hay detección del lado del servidor. Simplemente funciona.

Estilizado CSS y animación

Como SVG es básicamente XML con estilos, puedes hacer cosas que no son posibles con formatos raster:

Cambiar colores al pasar el ratón (en contextos soportados)
Añadir animaciones sutiles
Usar variables CSS para temas
Modificar estilos con JavaScript

No me volvería loco con las animaciones en un favicon—es algo molesto. Pero tener la opción está bien.

La situación del soporte de navegadores

Seamos honestos sobre esto: el soporte de favicon SVG no es perfecto. Esta es la realidad a partir de 2025:

Soporte completo:

Chrome 80+ (escritorio y Android)
Firefox 41+
Edge 80+
Opera 44+
Samsung Internet 13+

Sin soporte:

Safari (tanto escritorio como iOS)
Internet Explorer
Navegador Android

Safari es el gran problema. El navegador de Apple todavía no soporta favicons SVG, lo que significa que aproximadamente el 20% de los usuarios no verán tu icono SVG. Necesitas un respaldo.

Implementando favicons SVG de la manera correcta

Configuración básica con respaldos

Aquí está el marcado que cubre a todos:

<head>
  <!-- Respaldo ICO para navegadores muy antiguos -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- SVG para navegadores modernos -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- Respaldo PNG para Safari -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon (Safari no usará tu SVG) -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

El orden importa. Los navegadores analizan estos secuencialmente y usan el último que soportan. Los navegadores modernos tomarán el SVG, Safari usará el PNG, y los navegadores antiguos recurren al ICO.

Consejo profesional: Evita que Chrome use ICO

Chrome a veces descarga el ICO incluso cuando SVG está disponible. Añade sizes="32x32" a tu enlace ICO—esto le dice a Chrome que el ICO es solo para ese tamaño específico, así que prefiere el SVG escalable.

Creando un SVG adaptativo al modo oscuro

Aquí hay un ejemplo más completo:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-bg { fill: #ffffff; }
    .icon-fg { fill: #000000; }

    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #1a1a1a; }
      .icon-fg { fill: #f0f0f0; }
    }
  </style>

  <circle class="icon-bg" cx="16" cy="16" r="15"/>
  <text class="icon-fg" x="16" y="21"
        text-anchor="middle"
        font-family="system-ui"
        font-weight="bold"
        font-size="18">F</text>
</svg>

Esto crea un icono circular con una letra que invierte los colores según la preferencia del sistema.

Verificación de la realidad del tamaño de archivo

A veces la gente afirma que SVG siempre es más pequeño. Eso no es del todo cierto. Aquí está el asunto:

Iconos geométricos simples: SVG gana, a menudo por mucho
Ilustraciones complejas: PNG podría ser realmente más pequeño
Fotos o gráficos detallados: No uses estos como favicons

Para favicons típicos estilo logo (formas, letras, gráficos simples), SVG es casi siempre la mejor opción en tamaño de archivo.

Consejos de optimización

Antes de implementar tu favicon SVG, pásalo por SVGOMG o un optimizador similar. Las herramientas de exportación como Illustrator y Figma añaden mucho exceso—metadatos, comentarios del editor, precisión innecesaria en coordenadas.

Una buena optimización puede reducir el tamaño de tu SVG en un 50-70%.

También, mantén tus diseños simples. Gradientes complejos, filtros y cientos de trazados no solo aumentarán el tamaño del archivo—pueden causar retrasos en el renderizado.

Una cosa que debes saber sobre la detección de tema

La media query prefers-color-scheme dentro de SVG sigue la preferencia del sistema operativo, no la configuración de tema del navegador. Si alguien usa macOS en modo oscuro pero tiene su navegador configurado con un tema claro, el favicon seguirá siendo estilo modo oscuro.

Esto coincide con cómo la mayoría de los sitios web manejan el modo oscuro de todos modos, pero vale la pena saberlo.

¿Deberías cambiar a SVG?

Si tu favicon actual es una forma simple o un logotipo de letras, SVG probablemente vale la pena. Obtienes:

Un archivo en lugar de muchos
Soporte automático de modo oscuro
Tamaño total de archivo más pequeño
Escalabilidad a prueba de futuro

Si tu favicon es una ilustración detallada o tienes muchos usuarios de Safari, quédate con PNG como tu formato principal.

¿El mejor enfoque para la mayoría de los sitios? Usa ambos. SVG para navegadores que lo soportan, respaldo PNG para los que no. Toma 5 minutos extra configurarlo y cubre el 100% de los usuarios.

Lista de verificación de implementación rápida

[ ] Crea tu favicon SVG (mantenlo simple)
[ ] Añade media query de modo oscuro si es necesario
[ ] Optimiza con SVGOMG
[ ] Crea respaldo PNG (mínimo 32x32)
[ ] Crea apple-touch-icon.png (180x180)
[ ] Añade etiquetas link apropiadas con orden de respaldo
[ ] Prueba en Chrome, Firefox y Safari

Eso es realmente todo. Los favicons SVG no son complicados—simplemente están infrautilizados. Pruébalos en tu próximo proyecto.

Referencias

Can I Use - SVG Favicons - Datos de compatibilidad de navegadores para soporte de favicon SVG
Building an Adaptive Favicon - web.dev - Guía de Google para crear favicons adaptativos
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - Exploración completa de las capacidades de favicon SVG
How to Favicon in 2025 - Evil Martians - Guía práctica de implementación moderna de favicon