Favicon (.ico) vs SVG

SVG es un formato vectorial, lo que significa que un único favicon SVG se representa con cualquier densidad de píxeles sin degradación. En una pantalla 1x, se muestra a 16×16 píxeles; en una pantalla Retina 3x, se representa a 48 × 48 píxeles físicos del mismo archivo. Ningún paquete ICO con 4 marcos ráster de tamaño específico puede igualar este manejo automático de densidad. SVG es el formato ideal para pantallas modernas de alto DPI.

El formato .ico sigue siendo la base universal. Todos los navegadores de escritorio, navegadores móviles, sistemas operativos y herramientas de terceros que se ocupan de íconos web han admitido favicon.ico desde finales de la década de 1990. Muchos de estos entornos no comprueban en absoluto las etiquetas de enlace HTML; simplemente intentan recuperar /favicon.ico de la raíz del dominio como convención. Eliminar .ico de su configuración rompe instantáneamente los favicons de un segmento significativo de usuarios y herramientas.

La compatibilidad con el modo oscuro es la característica principal de los favicons SVG. Un archivo SVG puede incrustar un bloque `<style>` con una consulta `@media (prefers-color-scheme: dark)`. Cuando el navegador está en modo oscuro, la consulta se activa y puede cambiar el relleno, el trazo o el color de fondo del icono. Esto es imposible con .ico o PNG: esos formatos son rásteres estáticos sin conciencia ambiental.

La compatibilidad del navegador con los favicons SVG ha madurado significativamente. Chrome 80+ (lanzado en 2020), Edge 80+, Firefox 41+ y Safari 15+ (lanzado en 2021) son compatibles con `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`. A partir de 2026, la gran mayoría de las instalaciones de navegadores activos admiten favicons SVG. La excepción notable es el Safari más antiguo (anterior a 15) en dispositivos iOS más antiguos: estos vuelven a .ico automáticamente.

El tamaño del archivo es otra ventaja de SVG. Un favicon SVG monocromático limpio para una marca simple suele tener menos de 1 KB. Un archivo .ico que incluye fotogramas rasterizados de 16, 32, 48 y 64 px con buena calidad suele tener entre 10 y 25 KB. Para sitios con requisitos de tiempo de carga muy rápidos, publicar un favicon SVG en lugar de un conjunto PNG independiente reduce significativamente la carga útil del favicon, aunque cualquiera de los formatos se almacena en caché después de la primera carga.

La sintaxis de enlace del favicon SVG es ligeramente diferente a la de .ico. Necesita un atributo de tipo explícito: `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`. Sin el atributo de tipo, algunos navegadores no reconocen el archivo como un favicon. Empareje esto con la etiqueta de enlace alternativo .ico primero: `<link rel='icon' href='/favicon.ico'>`. Los navegadores que entienden los favicons SVG prefieren la etiqueta SVG más específica; otros pasan al .ico.

Vale la pena realizar la optimización SVG antes de implementar un favicon. Las herramientas de diseño exportan SVG con metadatos del editor, comentarios, rutas invisibles y atributos redundantes que agregan bytes sin ninguna contribución visual. Ejecutar su SVG a través del SVG optimizer puede reducir el tamaño del archivo entre un 50 y un 80 % manteniendo el ícono visualmente idéntico. Los SVG más pequeños también analizan más rápido, lo que es importante en conexiones más lentas.

El formato .ico maneja la integración del sistema operativo Windows que SVG no puede. Los accesos directos del escritorio creados a partir de pestañas del navegador, pines de la barra de tareas y los íconos del Explorador de archivos Windows dicen /favicon.ico. SVG no es un formato de icono Windows reconocido en estos contextos. Incluso los usuarios que ven principalmente el favicon SVG en las pestañas de su navegador verán la versión .ico cuando creen un acceso directo Windows a su sitio.

Es posible animar un favicon con SVG usando elementos `<animate>` o animaciones SMIL dentro del archivo SVG. Un favicon animado SVG puede pulsar, girar o cambiar de color. La compatibilidad del navegador con la animación SVG en favicons es limitada (Chrome y Edge la admiten; Firefox y Safari no), pero es una opción creativa para aplicaciones web que desean mostrar cambios de estado (por ejemplo, indicadores de carga, nuevos puntos de notificación) a través del favicon.

Los favicons SVG admiten modos de color avanzados más allá del simple cambio de luz/oscuridad. Puede usar propiedades personalizadas de CSS dentro de SVG, responder a consultas de medios `forced-colors` para el modo de alto contraste y usar múltiples puntos de interrupción de combinación de colores. Este nivel de tematización es imposible con formatos ráster y hace de SVG la mejor opción para sistemas de diseño centrados en la accesibilidad.

La limitación práctica de SVG en producción es que aún necesita un respaldo que no sea SVG. El enfoque más simple es mantener SVG como su ícono principal y generar .ico y apple-touch-icon PNG desde la misma fuente SVG. El favicon generator acepta SVG como formato de origen y produce las salidas .ico y PNG a partir de los datos vectoriales, sin pérdida de calidad por la rasterización.

Para las tarjetas para compartir en redes sociales, imágenes OG y despliegue de enlaces, el formato de origen del favicon es irrelevante: las plataformas sociales obtienen el favicon de su HTML o /favicon.ico y lo convierten internamente. Ya sea que su favicon sea .ico, PNG o SVG, la tarjeta de enlace desplegada mostrará el ícono independientemente. Céntrese en la calidad del contenido del ícono en lugar del formato para los escenarios de intercambio social.

La implementación de la configuración recomendada de ico+SVG implica solo tres etiquetas de enlace: respaldo `.ico`, `image/svg+xml` SVG y `apple-touch-icon` PNG. Los navegadores los leen en orden de especificidad (primero el formato más específico) y eligen el primero que admiten. Este enfoque de mejora progresiva significa que cada usuario obtiene el mejor favicon que su navegador puede manejar. Consulte best favicon format guide para obtener la matriz de decisión completa.