Favicons SVG: Cuándo Usar Uno, y el ICO que Aún Necesitas
Un único SVG puede ser tu favicon más nítido en los navegadores modernos, y puede cambiar al modo oscuro desde un solo archivo. Simplemente no puede ser tu único icono, así que aquí tienes dónde encaja y qué le deja al .ico y a los PNG.
Qué hace bien un favicon SVG
Un favicon se dibuja a tamaños muy distintos entre las superficies, y un único SVG los cubre todos desde un solo archivo. Se mantiene nítido en cualquier pantalla porque es vectorial, no una cuadrícula fija de píxeles, así que no hay ampliación borrosa ni exports separados de 16, 32 y 48 píxeles que mantener sincronizados.
Tiene un truco más que un icono raster no puede igualar: una media query prefers-color-scheme dentro del SVG permite que el mismo archivo se recolore cuando el sistema operativo cambia al modo oscuro, así que la marca sigue siendo legible contra una barra de pestañas oscura sin entregar una segunda imagen.
Enlazándolo, con los fallbacks
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Un navegador que entiende SVG prefiere la primera línea. Todo lo demás está ahí para las superficies que no lo entienden.
Dónde funciona el SVG, y dónde no
| Superficie | ¿Usa el SVG? |
|---|---|
| Pestañas de navegadores modernos | Sí, y es donde se ve mejor |
| Navegadores más antiguos | No, recurren al .ico o a un PNG |
| La ruta /favicon.ico | No, esa petición necesita un .ico de verdad |
| Pantalla de inicio de iOS | No, usa el apple-touch-icon PNG |
| Instalación Android y PWA | No, lee iconos PNG del manifest |
Haciendo que el SVG se adapte al modo oscuro
Coloca una media query prefers-color-scheme en los propios estilos del SVG y deja que cambie los colores de relleno cuando cambie el tema del OS. Un único archivo se lee entonces correctamente tanto en la interfaz clara como en la oscura del navegador, que es la forma más elegante de gestionar un favicon adaptable al tema.
Si prefieres no mantener la media query, una única marca de tono intermedio con suficiente contraste para sobrevivir en cualquier fondo es un camino más simple hacia el mismo objetivo.
Preguntas frecuentes
¿Debería usar un favicon SVG?
Para la pestaña del navegador, sí: es un único archivo, escala a la perfección y puede adaptarse al modo oscuro. Solo combínalo con un favicon.ico y app icons PNG para que las superficies que no leen SVG sigan estando cubiertas.
¿Todos los navegadores admiten favicons SVG?
La mayoría de los navegadores modernos sí, pero no todos, y ninguna superficie de pantalla de inicio usa uno. Por eso mantienes un .ico y PNG como fallbacks en lugar de depender solo del SVG.
¿Sigo necesitando favicon.ico si tengo un SVG?
Sí. Los navegadores, rastreadores y lectores de feeds todavía solicitan /favicon.ico por la ruta, y esa petición no se puede responder con un SVG. Mantén un .ico de verdad en la raíz del sitio.
¿Puede un favicon SVG hacer modo oscuro?
Sí, esa es una de sus ventajas. Una media query prefers-color-scheme dentro del SVG lo recolora cuando el OS cambia de tema, así que un único archivo funciona tanto en la interfaz clara como en la oscura del navegador.