Los SVG favicons representan la vanguardia de la tecnología de iconos para sitios web. Son escalables, soportan el modo oscuro y pueden ser un único archivo que se ve perfecto en cualquier tamaño. Aquí tienes todo lo que necesitas saber.
¿Por qué SVG Favicons?
- Infinitamente escalable — Se ve nítido a 16px, 32px, 512px o cualquier tamaño. Nunca hay pixelación.
- Tamaño de archivo minúsculo — Un SVG favicon simple puede pesar menos de 1KB, más pequeño que cualquier PNG.
- Soporte para modo oscuro — SVG puede usar las media queries CSS
prefers-color-schemepara adaptarse. - Un solo archivo para gobernarlos a todos — No necesitas múltiples tamaños (aunque seguirás necesitando fallbacks en PNG).
Soporte de Navegadores (2026)
| Navegador | Soporte de SVG Favicon |
|---|---|
| Chrome 80+ | Sí |
| Firefox 41+ | Sí |
| Edge 80+ | Sí |
| Opera 67+ | Sí |
| Safari | No (a partir de Safari 18) |
| IE | No |
Limitación clave: Safari no soporta los SVG favicons. Esto significa que debes proporcionar fallbacks en PNG/ICO para una cobertura completa del navegador.
Cómo Implementar un SVG Favicon
<!-- SVG favicon for modern browsers -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- PNG fallback for Safari and older browsers -->
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<!-- ICO fallback for very old browsers -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- Apple Touch Icon (always PNG, SVG not supported) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Los navegadores que soportan SVG lo usarán; otros recurrirán a PNG o ICO.
Adaptación al Modo Oscuro
La característica estrella de los SVG favicons: tu icono puede adaptarse automáticamente al esquema de color del usuario:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
circle { fill: #1d1d1f; }
text { fill: white; }
@media (prefers-color-scheme: dark) {
circle { fill: white; }
text { fill: #1d1d1f; }
}
</style>
<circle cx="50" cy="50" r="45"/>
<text x="50" y="65" text-anchor="middle"
font-family="system-ui" font-size="50" font-weight="bold">M</text>
</svg>En modo claro: icono oscuro sobre fondo claro. En modo oscuro: icono claro sobre fondo oscuro. Automático, sin necesidad de JavaScript.
Creando un SVG Favicon
Método 1: Herramientas de Diseño
- Figma — Diseña tu icono, selecciónalo y expórtalo como SVG
- Illustrator — Archivo → Guardar como → SVG
- Inkscape — Editor vectorial gratuito y de código abierto
Método 2: Codifícalo a Mano
Para iconos sencillos, escribir SVG a mano es rápido:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" rx="20" fill="#0071e3"/>
<text x="50" y="70" text-anchor="middle"
font-size="60" font-weight="bold" fill="white">F</text>
</svg>Consejos de Optimización
- Usa SVGOMG para optimizar el tamaño del archivo
- Elimina metadatos innecesarios, comentarios y atributos específicos del editor
- Mantén los trazados simples — los gradientes complejos pueden no renderizarse bien en tamaños pequeños
- Incluye siempre el atributo
xmlns - Establece un
viewBoxpara un escalado adecuado
La Configuración Completa Recomendada en 2026
Combinar SVG con fallbacks tradicionales te ofrece lo mejor de todos los mundos:
<!-- Modern: SVG with dark mode support -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Fallback: Traditional favicon set -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- Apple (no SVG support) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- PWA -->
<link rel="manifest" href="/site.webmanifest">¿Deberías Usar SVG Favicon Hoy?
Sí, pero siempre con fallbacks. La limitación de Safari significa que no puedes depender solo de SVG. Sin embargo, para los usuarios de Chrome, Firefox y Edge, un SVG favicon proporciona una experiencia notablemente mejor, especialmente si soportas el modo oscuro.