Iconos SVG vs ICO

SVG es el futuro; ICO es la base. Publica ambos.

4 min de lectura

Comprueba favicons en cualquier sitio

Instala la extensión FetchFavicon para Chrome para extraer, previsualizar y validar favicons al instante.

Instalar extensión de Chrome

Por qué SVG gana en navegadores modernos

Un archivo, escalable infinitamente, compatible con media queries de modo oscuro. El tamaño del archivo suele estar por debajo de 2 KB.

Por qué ICO sigue siendo esencial

Los navegadores antiguos, los accesos directos de Windows y algunos integradores solo leen .ico. Omitirlo provoca un icono roto para aproximadamente el 5 % de los usuarios.

Úsalos juntos

Enlaza favicon.ico primero como respaldo universal, luego añade <link rel="icon" type="image/svg+xml"> para los navegadores que lo admitan.

Preguntas frecuentes

Should I use SVG or ICO for a favicon?

Use both. Link favicon.ico as the universal fallback, then add <link rel="icon" type="image/svg+xml"> for scalable rendering on modern browsers.

Does SVG work in every browser?

Most modern browsers support SVG favicons, but older browsers and some embedders still need .ico. Never ship SVG alone.

Can an SVG favicon support dark mode?

Yes. Embed a <style>@media (prefers-color-scheme: dark) { ... }</style> block inside the SVG file.

Guías relacionadas

Prueba las herramientas

Continuar leyendo