Si alguna vez has estado construyendo un mockup para un cliente, un dashboard de análisis de la competencia, o simplemente intentando hacer ingeniería inversa de cómo MercadoLibre maneja su icono de pestaña en modo oscuro, probablemente te hayas chocado contra una pared. Intentas añadir /favicon.ico al final de la URL y te llevas un hermoso error 404. Los navegadores han dejado muy atrás la época del archivo único en la raíz. Si quieres saber exactamente cómo copiar el favicon de una página web (how to copy a website favicon) hoy en día, tienes que mirar el DOM.
Hago esto constantemente cuando audito sitios de clientes. Capturar su configuración actual de iconos es el paso uno antes de arreglarlo. Aquí tienes mi flujo de trabajo exacto para copiar la implementación del favicon de un sitio directamente desde el navegador.
El Flujo de Trabajo del Desarrollador: Cómo Copiar un Favicon
No te molestes en 'Ver código fuente de la página'. Los frameworks modernos de JavaScript (como Next.js o Nuxt) a menudo inyectan estas etiquetas dinámicamente. Necesitamos el DOM renderizado.
Paso 1: Abre el Panel de Elementos
Haz clic derecho en cualquier parte de la página web objetivo y selecciona 'Inspeccionar'. Presiona Cmd+F (o Ctrl+F) dentro del panel de Elementos y busca rel='icon'.
Paso 2: Copia el Nodo HTML Exacto
Es muy probable que encuentres múltiples etiquetas. Vercel, por ejemplo, usa una mezcla de SVGs y PNGs como respaldo. Haz clic derecho en el nodo <link>, selecciona 'Copiar' y luego 'Copiar elemento'. Esto te da el marcado exacto que usan para servir el icono.
Paso 3: Extrae el Recurso vía Consola
Si solo quieres el archivo de imagen en sí, escarbar entre rutas relativas (/assets/images/icon.svg) es una molestia. Salta a la Consola de tus DevTools y ejecuta este pequeño fragmento:
const icon = document.querySelector('link[rel="icon"]').href;
console.log(icon);Esto resuelve instantáneamente la URL absoluta. Haz clic en ella y guarda la imagen.
Errores Comunes al Copiar Iconos
Agarrar el icono es fácil, pero reutilizarlo a ciegas normalmente rompe cosas. Cuidado con estas trampas:
- Rutas Relativas: Si copias la etiqueta HTML directamente a tu proyecto local, una ruta como
href='/favicon.svg'buscará el archivo en tu localhost, resultando en una pestaña en blanco. - Iconos de Apple Touch Faltantes: El
rel='icon'estándar no cubre las pantallas de inicio de iOS. A menudo necesitas cazar elrel='apple-touch-icon'por separado. - Media Queries en SVG: Si copias un favicon SVG, ten en cuenta que podría contener CSS interno para el modo oscuro. Si tu entorno de mockup no coincide, podría volverse invisible.
Si estás haciendo esto manualmente para más de un sitio, estás perdiendo el tiempo. Aunque el truco de la consola es genial para un apuro, construí Mzu favicondl para automatizar esto. Analiza la URL objetivo, resuelve todas las rutas y empaqueta los iconos por ti.
Si quieres profundizar en métodos de extracción alternativos, echa un vistazo a nuestra guía sobre cómo descargar favicons de cualquier sitio web, o aprende por qué los sitios modernos usan favicons SVG en primer lugar. Deja de adivinar URLs y empieza a inspeccionar el DOM.