Seguro que te ha pasado. Ves un favicon nítido, perfectamente escalado en la web de un competidor: no se ve borroso ni a 16x16, soporta modo oscuro y se ve genial en una pantalla Retina. Abres DevTools, rebuscas en el <head> y te encuentras... un lío de PNGs y archivos ICO. Ni rastro del SVG.

Ese es el problema. La mayoría de las guías para extraer favicons te enseñan a bajar un PNG o un ICO. Pero en 2026, el verdadero tesoro es el favicon en SVG: el formato que escala infinitamente, soporta modo oscuro con prefers-color-scheme y pesa una fracción de una imagen rasterizada. Aquí te cuento cómo extraer uno de verdad.

Por qué merece la pena buscar favicons SVG

Antes de meternos en faena, déjame convencerte de que esto importa. GitHub usa un favicon SVG. También Stripe. Y Apple. Estas empresas no lo eligen porque sea moderno — lo eligen porque un solo archivo SVG reemplaza seis PNGs, un ICO y una entrada en el manifiesto web.

Un favicon SVG además sobrevive al modo oscuro sin parecer un fantasma. Puedes incrustar @media (prefers-color-scheme: dark) directamente en el SVG, así tu icono se invierte o cambia de color automáticamente. Intenta hacer eso con un PNG.

El proceso de extracción manual

Paso 1: Inspecciona el código fuente de la página

Abre cualquier web en Chrome o Firefox. Haz clic derecho en cualquier sitio y selecciona 'Inspeccionar' (o pulsa Ctrl+Mayús+I). Ve a la pestaña 'Elementos' y busca rel='icon' en el <head>. Busca un enlace SVG:

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

Si ves esto, estás de suerte. Solo tienes que hacer clic en el valor de href para abrir el SVG en una pestaña nueva y luego guardarlo. Pero ojo: muchos sitios esconden su favicon SVG detrás de un atributo sizes o usan un rel='mask-icon' para Safari. No te quedes con el primer enlace que encuentres.

Paso 2: Revisa el manifiesto web

Las aplicaciones web progresivas (PWAs) modernas suelen declarar su favicon SVG dentro de un archivo site.webmanifest. Busca rel='manifest' en el <head>:

<link rel='manifest' href='/site.webmanifest'>

Abre ese archivo JSON en una pestaña nueva. Busca una propiedad llamada icons — es un array de objetos. Encuentra la entrada donde type sea igual a 'image/svg+xml'. Esa es la URL de tu favicon SVG. Cópiala y descarga el archivo.

Paso 3: Usa la API de favicon como último recurso

Algunos sitios no exponen su favicon SVG en el HTML. Confían en la petición automática del navegador a /favicon.ico. En ese caso, tienes que adivinar la ruta. Las ubicaciones más comunes son:

Solo escríbelas en la barra de direcciones después del dominio. Si el servidor devuelve un 404, es probable que el sitio no use un favicon SVG — o lo han escondido muy bien.

Usa Mzu favicondl para extraer favicons SVG

La inspección manual funciona, pero es tediosa cuando tienes que extraer favicons de varios sitios. Ahí es donde entra Mzu favicondl. Nuestra herramienta escanea el <head> de la página, el manifiesto web e incluso rutas de archivo comunes para encontrar el favicon SVG automáticamente.

Así funciona:

  1. Ve a Mzu favicondl.
  2. Pega la URL del sitio web en el campo de entrada.
  3. Haz clic en 'Extraer'.
  4. La herramienta lista todos los favicons encontrados — incluyendo SVG, PNG, ICO e iconos de Apple Touch.
  5. Haz clic en el botón de descarga junto a la entrada SVG.

Y ya está. La herramienta también te muestra el código SVG sin procesar si quieres inspeccionarlo antes de descargarlo. Sin anuncios, sin registro, sin tonterías.

Consejos avanzados para extraer favicons SVG

Cuidado con las rutas relativas

Muchos sitios usan rutas relativas como /assets/favicon.svg. Cuando copies el valor de href desde DevTools, tienes que añadir el dominio delante. Mzu favicondl hace esto automáticamente, pero si lo haces a mano, no olvides la URL base.

Comprueba las variantes de modo oscuro

Algunos sitios sirven un favicon SVG diferente según el esquema de color del usuario. Busca un atributo media='(prefers-color-scheme: dark)' en la etiqueta <link>. Si encuentras uno, tendrás que extraer tanto la variante clara como la oscura.

Valida el SVG

No todos los archivos SVG son favicons válidos. Algunos contienen referencias externas, JavaScript o valores viewBox enormes. Antes de usar un favicon SVG extraído, ábrelo en un editor de texto y comprueba que sea autocontenido. Elimina cualquier etiqueta <script> — los navegadores las ignoran en los favicons de todas formas, pero es una buena práctica.

Qué hacer después de la extracción

Una vez que tengas el favicon SVG, querrás implementarlo en tu propio sitio. Echa un vistazo a nuestra guía sobre Favicon SVG: El enfoque moderno para ver el código HTML exacto y la configuración del modo oscuro. Si necesitas convertir el SVG a ICO para navegadores antiguos, nuestro Conversor de SVG a ICO lo hace con un solo clic.

En resumen: extraer un favicon SVG no es ciencia espacial, pero requiere saber dónde mirar. Salta los PNGs. Ve directo al SVG — tus pestañas del navegador te lo agradecerán.