Cómo descargar el favicon desde la URL de un sitio web: El flujo de trabajo del desarrollador en 2026

He perdido la cuenta de las veces que he necesitado descargar un favicon de un sitio en vivo. Quizás estás construyendo un dashboard que muestra los logos de tus partners. O estás auditando los assets de marca de un competidor. O simplemente quieres usar el icono del octocat de GitHub para un proyecto personal. Sea cual sea el motivo, descargar un favicon desde la URL de un sitio web debería ser una tarea de 10 segundos, no una búsqueda del tesoro en el DOM.

Sin embargo, la mayoría de los desarrolladores siguen haciéndolo a la antigua. Hacen clic derecho, guardan como, y terminan con un borrón de 16x16. O adivinan la URL (/favicon.ico) y se encuentran con un 404. Déjame mostrarte el flujo de trabajo real, el que uso a diario en 2026.

Por qué fallan los métodos antiguos

La ruta implícita /favicon.ico no es fiable desde 2015. Los sitios modernos sirven favicons desde CDNs, usan archivos SVG, o los incrustan en manifiestos web. GitHub, por ejemplo, sirve su favicon desde https://github.githubassets.com/favicons/favicon.svg, no desde la raíz. Si simplemente accedes a github.com/favicon.ico, obtendrás una redirección o un fallback genérico.

Y eso es solo el principio. Muchos sitios usan múltiples iconos para diferentes contextos: modo oscuro, pestañas ancladas, Apple Touch icons y manifiestos PWA. Agarrar el equivocado hará que tu proyecto se vea poco profesional.

El flujo de trabajo profesional para descargar un favicon desde la URL

Aquí está el proceso exacto que sigo. Funciona para cualquier sitio, cualquier framework, cualquier navegador.

Paso 1: Abre DevTools e inspecciona el head

Haz clic derecho en cualquier parte de la página y selecciona Inspeccionar. Ve a la pestaña Elements y busca rel='icon' o rel='apple-touch-icon'. Verás algo como esto:

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

Esto te dice exactamente qué archivos usa el sitio. Copia el valor de href, pero recuerda que a menudo es una ruta relativa. Antepón el dominio para obtener la URL completa.

Paso 2: Revisa el Web Manifest

Muchos sitios modernos (especialmente PWAs) definen sus iconos en un archivo site.webmanifest. Busca rel='manifest' en el head. El JSON del manifiesto listará los iconos en varios tamaños:

{
  'name': 'GitHub',
  'icons': [
    {'src': '/android-chrome-192x192.png', 'sizes': '192x192', 'type': 'image/png'},
    {'src': '/android-chrome-512x512.png', 'sizes': '512x512', 'type': 'image/png'}
  ]
}

Aquí es donde encontrarás los iconos de alta resolución, perfectos para tus propios proyectos.

Paso 3: Usa Mzu favicondl para el trabajo pesado

Inspeccionar manualmente cada sitio se vuelve cansino rápidamente. Por eso construí Mzu favicondl: automatiza todo el proceso. Pega la URL y escanea el HTML de la página, el manifiesto y las etiquetas Apple Touch. Devuelve todas las variantes de favicon en todos los formatos: SVG, PNG, ICO e incluso los iconos heredados de Windows Tile.

Sin más adivinanzas. Sin más 404s. Solo una lista limpia de archivos descargables.

Errores comunes al descargar favicons

Incluso con las herramientas adecuadas, puedes tropezar. Estos son los errores que veo más a menudo:

• Agarrar el tamaño equivocado: El /favicon.ico por defecto suele ser de 16x16. Para un dashboard o icono de app, necesitas al menos 192x192 del manifiesto.
• Ignorar las variantes de modo oscuro: Algunos sitios sirven un favicon diferente en modo oscuro usando media='(prefers-color-scheme: dark)'. Si descargas la versión clara, desaparecerá en fondos oscuros.
• Olvidarse del SVG: Los favicons SVG son nítidos a cualquier tamaño. Si el sitio ofrece uno, agárralo. Es el formato más preparado para el futuro.

Para una inmersión más profunda en la resolución de problemas, consulta nuestra guía sobre por qué tu favicon no se muestra: cubre los mismos problemas desde el lado del servidor.

Ejemplo real: la pila de favicons de Stripe

Déjame mostrarte cómo es una configuración profesional. Stripe sirve su favicon desde un CDN con múltiples variantes. Cuando inspeccioné su sitio, encontré:

• Un favicon SVG para navegadores modernos
• Un PNG de 32x32 como fallback para navegadores antiguos
• Un Apple Touch Icon de 180x180
• Un manifiesto web con iconos de 192x192 y 512x512

También usan cadenas de consulta para evitar la caché (?v=123) y forzar actualizaciones. Si estás construyendo un sitio que se preocupa por la consistencia de marca (y deberías), este es el patrón a seguir.

Consejos profesionales para 2026

Aquí hay algunas cosas que he aprendido después de años haciendo esto:

• Descarga siempre el SVG primero. Es el archivo más pequeño y escala perfectamente. Solo recurre al PNG si necesitas soporte para navegadores antiguos.
• Revisa los Apple Touch Icons por separado. Suelen tener mayor resolución que el favicon estándar y funcionan genial como iconos de app.
• Usa el manifiesto para iconos PWA. Si el sitio es una Progressive Web App, el manifiesto tendrá los iconos de mejor calidad.

Para una referencia completa sobre tamaños y formatos, lee nuestra guía de tamaños de favicon. Te ahorrará servir iconos borrosos en pantallas retina.

Conclusión

Descargar un favicon desde la URL de un sitio web no tiene por qué ser un juego de adivinanzas. Usa DevTools para encontrar las URLs reales, revisa el manifiesto en busca de variantes de alta resolución y deja que Mzu favicondl se encargue de la automatización. Tu yo del futuro, y tus usuarios, te lo agradecerán cuando los iconos se vean nítidos en todos los dispositivos.