¿Qué es un favicon SVG?
Un favicon SVG es un icono basado en vectores que escala perfectamente en cualquier tamaño. A diferencia de los favicons PNG o ICO, los favicons SVG nunca se ven borrosos — se renderizan a la resolución exacta necesaria.
¿Por qué usar favicons SVG?
Escalado perfecto
- Cualquier tamaño, cualquier resolución — No más crear múltiples tamaños de PNG
- Preparado para alta densidad — Siempre nítido en pantallas Retina y 4K
- A prueba de futuro — Funciona en cualquier densidad de pantalla, presente y futura
Soporte de modo oscuro
Los favicons SVG pueden adaptarse al esquema de colores del usuario usando media queries CSS:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #333; }
@media (prefers-color-scheme: dark) {
path { fill: #fff; }
}
</style>
<path d="M16 2L2 30h28L16 2z" />
</svg>Tamaño de archivo reducido
Los SVG son típicamente mucho más pequeños que los PNG equivalentes, especialmente en tamaños grandes.
Compatibilidad con navegadores
| Navegador | Soporte de favicon SVG |
|---|---|
| Chrome | Sí (80+) |
| Firefox | Sí (41+) |
| Edge | Sí (80+) |
| Safari | Sí (15.4+) |
| Opera | Sí (67+) |
Cómo solucionarlo
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />Buenas prácticas
- Proporciona siempre un respaldo PNG — Para navegadores antiguos que no soportan favicons SVG
- Mantén la simplicidad — SVGs complejos pueden no renderizarse bien a 16x16
- Usa CSS para el modo oscuro — Aprovecha el soporte de media queries de SVG
- Optimiza el SVG — Elimina metadatos innecesarios y espacios en blanco
- Prueba en varios navegadores — Verifica que se renderice correctamente en todos los principales
Configuración recomendada
<!-- SVG primary (modern browsers) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- PNG fallback (older browsers) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />