Guía

Favicon (.ico) vs SVG

SVG es el formato de favicon más interesante de la era moderna — vectorial, compatible con modo oscuro y minúsculo. Pero no puede reemplazar completamente a .ico en 2026. Te explicamos por qué y cómo usar ambos.

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

SVG escala de forma infinita y admite media queries de modo oscuro dentro del propio archivo. Un SVG de 1 KB cubre todas las densidades en todos los navegadores modernos.

ICO es el respaldo universal. Versiones antiguas de Safari, navegadores heredados y la convención de la URL directa <code>/favicon.ico</code> aún dependen de él.

La configuración recomendada: publica <code>favicon.ico</code> + <code>favicon.svg</code>. Los navegadores compatibles con SVG lo preferirán; el resto recurre a .ico automáticamente.

Cómo funciona

  1. 1

    Diseña o exporta un SVG

    viewBox cuadrado, un solo elemento <svg> raíz.

  2. 2

    Genera el respaldo .ico

    Usa FetchFavicon para rasterizar tu SVG en un .ico multiresolución.

  3. 3

    Enlaza ambos

    <link rel="icon" href="/favicon.ico"> + <link rel="icon" type="image/svg+xml" href="/favicon.svg">.

Pruébalo ahora

Genera el par .ico + SVG

Convertidor de SVG a PNG

Preguntas frecuentes

¿Puedo eliminar .ico por completo si uso SVG?+

No de forma segura. Muchos embeds sociales, lectores RSS y herramientas antiguas aún solicitan /favicon.ico por convención.

¿Qué navegadores admiten favicons SVG?+

Chrome 80+, Edge 80+, Firefox 41+, Safari 15+ y Brave. iOS Safari sigue prefiriendo el apple-touch-icon en PNG.

¿Qué tan pequeño puede ser un favicon SVG?+

Menos de 1 KB para una marca monocromática limpia. Incluso los logos multicolor complejos rara vez superan los 4 KB.

Herramientas relacionadas

Más guías

Guías