Cómo obtener el favicon de cualquier sitio web (y por qué el tuyo probablemente esté roto)

Un favicon es el recurso más pequeño de tu sitio web y uno de los más vistos. Está en la pestaña del navegador, junto al marcador, en el desplegable de autocompletado cuando alguien escribe tu dominio de memoria y (cada vez más) justo al lado de tu resultado en las búsquedas y en los resúmenes generados por IA. Dieciséis píxeles, quizá treinta y dos, y hace más trabajo de marca por píxel que casi cualquier otra cosa que poseas.

Que es exactamente por lo que la gente lo descuida. Nadie reserva tiempo de diseño para un cuadrado de 16x16. La mayoría de los sitios terminan con lo que su CMS generó automáticamente hace años, un logo estirado que se lee como una mancha gris, o en algunos casos con nada en absoluto, solo el icono genérico del globo del navegador ocupando el lugar donde debería estar una marca.

Hay dos situaciones en las que realmente necesitas obtener un favicon. Primera: estás construyendo un directorio, una tabla comparativa, una página de marcadores o un análisis de la competencia, y necesitas un lote de iconos de sitios rápido, sin tener que hacer cuarenta capturas de una pestaña del navegador. Segunda: estás auditando tu propio sitio y necesitas ver, con honestidad, cómo se ve tu favicon en los tamaños que importan, porque “se ve bien en mi editor” y “se ve bien en una pestaña de Chrome a 16px” no son la misma afirmación.

Ambos casos tienen la misma solución.

Obtén el favicon de cualquier sitio en un clic

Usa el Favicon Fetcher. Es gratuito, se ejecuta por completo en tu navegador y hace una sola cosa: convierte una lista de dominios en una cuadrícula de iconos listos para usar.

El flujo de trabajo es deliberadamente aburrido:

1. Pega dominios. Uno por línea, en el cuadro de texto. URLs completas, dominios simples, con www. o sin él, da igual, la herramienta lo normaliza todo. Pega un dominio o cincuenta.
2. Elige un tamaño. Botones para 16, 32, 64, 128 y 256px. El de 64 viene seleccionado por defecto porque es el punto óptimo para previsualizar la calidad sin pedir un archivo que no existe (más sobre esto abajo).
3. Obtén. Cada dominio se convierte en una tarjeta: el icono, el nombre del dominio y tres acciones.
4. Copia la URL, copia la etiqueta <img> o descarga el PNG. Lo que necesites. También hay un botón de “copiar todo” que vuelca todas las URLs obtenidas a tu portapapeles de una vez, que es la vía rápida si estás rellenando una hoja de cálculo o el listado de un directorio.

Nada se sube, nada se almacena, no hay muro de registro. Pegas, obtienes y te vas con un icono.

Una advertencia honesta: la herramienta obtiene los iconos de la misma forma que lo hace tu navegador cuando no encuentra el favicon declarado de un sitio, pidiéndole a un servicio de resolución de favicons lo que tenga en caché para ese dominio. Eso significa que es excelente para “consígueme un icono rápido para la fila de este competidor en mi tabla comparativa” y no es la herramienta a la que recurrir cuando necesitas una prueba pixel a pixel de la configuración de tu propio <link rel="icon">. Para eso, revisa tu propio marcado directamente (siguiente sección).

Si estás construyendo cualquier cosa con forma de lista, un directorio, un recopilatorio de “los mejores”, una página de envíos, los favicons son lo que la hacen fácil de recorrer con la vista. Un buen ejemplo: nuestra herramienta Directory Finder muestra un pequeño icono junto a cada listado exactamente por esta razón. Un muro de enlaces de texto se olvida. Un muro de enlaces de texto con iconos reconocibles al lado es un muro que realmente puedes ojear.

La chuleta del favicon

Esto es lo que de verdad se solicita y se renderiza en 2026, reducido a lo que necesitas y nada más.

Tamaños que importan:

• 16x16 - la pestaña del navegador y la barra de marcadores. Este es el que la gente olvida comprobar. El detalle que se ve nítido a 64px se convierte en barro a 16px.
• 32x32 - la barra de tareas de Windows, algunos gestores de marcadores y el tamaño que la mayoría de los navegadores solicita ahora por defecto en pantallas de mayor densidad.
• 48x48 - algunos accesos directos antiguos de Windows y un puñado de integraciones de escritorio. Baja prioridad pero barato de incluir.
• 180x180 - el icono táctil de Apple. Esto es lo que aparece cuando alguien añade tu sitio a la pantalla de inicio de su iPhone. Sáltatelo e iOS recortará y escalará tu favicon normal, y lo hará mal.
• 192x192 y 512x512 - iconos de PWA y de la pantalla de inicio de Android, declarados en el manifiesto de tu aplicación web. Si no distribuyes un manifiesto, puedes ignorarlos. Si lo haces, hazlos bien o tu icono “instalado” se verá como una mancha.

Formatos, ordenados por lo que realmente deberías usar:

• PNG es la respuesta por defecto. Todos los navegadores modernos lo soportan, comprime bien y es lo que deberías generar para cada tamaño de arriba.
• ICO es el formato heredado multirresolución (literalmente varias imágenes agrupadas en un solo archivo .ico). Todavía vale la pena mantenerlo como favicon.ico en la raíz porque algunos rastreadores y navegadores muy antiguos recurren a él automáticamente incluso sin una etiqueta <link> presente, pero es una red de seguridad, no tu formato principal.
• SVG: los favicons SVG son reales y ligeros, y un pequeño número de navegadores (basados en Chromium, sobre todo) admiten el cambio automático entre claro y oscuro dentro de un mismo archivo SVG. No confíes en él como tu único formato todavía; el soporte es lo bastante inconsistente como para que aún quieras respaldos en PNG.

Las etiquetas que de verdad se usan:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

Esa es toda la lista práctica. No necesitas una docena de etiquetas <link> con todos los tamaños imaginables incluidos; eso es un vestigio de una época con un soporte de navegadores mucho más fragmentado. Cubre los tamaños de pestaña, cubre el icono táctil de Apple, cubre el manifiesto si tienes una PWA, y listo.

Por qué tu favicon probablemente esté roto

Los favicons fallan en silencio. Nadie presenta un informe de error porque el icono de tu pestaña no cargó, simplemente no se fijan en tu marca. Esto es lo que suele pasar, ordenado a grandes rasgos según la frecuencia con la que vemos cada caso.

Ruta incorrecta o archivo ausente. El clásico: favicon.ico en realidad no está en la raíz de tu dominio, o un rediseño movió los recursos a una carpeta nueva y nadie actualizó la etiqueta <link>. Compruébalo directamente: visita tudominio.com/favicon.ico en un navegador. Si obtienes un 404, ese es tu error, punto.

Caché agresiva. Los navegadores cachean los favicons con fuerza, a veces durante toda la sesión de la pestaña o más, lo que significa que puedes arreglar el archivo y seguir viendo el icono antiguo y roto durante días. Si acabas de publicar un favicon nuevo y no aparece, no te lances a editar más tu HTML por pánico. Fuerza una recarga completa, o revísalo en una ventana privada o de incógnito, antes de concluir que el arreglo no funcionó.

Faltan tamaños, no falta el icono. El favicon “existe” pero solo como un archivo de baja resolución, así que el navegador está escalando una imagen de 16px hacia arriba para rellenar un hueco de 32px o de 180px. Se ve suave, borroso o pixelado exactamente en los lugares donde la nitidez más importa (el hueco del icono táctil de Apple, sobre todo). El arreglo es generar el conjunto completo de tamaños, no simplemente volver a subir el mismo archivo.

Sin variante para modo oscuro. Si tu favicon es una marca oscura sobre un fondo transparente, desaparece contra una barra de pestañas oscura del navegador. Si es claro sobre transparente, el mismo problema al revés. O diseñas algo que aguante en ambos, o distribuyes un SVG con una media query prefers-color-scheme dentro para los navegadores que la admiten.

Hotlinking bloqueado o reglas de CDN agresivas. Si tu CDN o WAF bloquea agentes de usuario o referentes no reconocidos, los servicios de resolución de favicons (y algunos navegadores con ajustes de privacidad estrictos) pueden recibir una respuesta bloqueada o vacía en lugar de tu icono. Si tu favicon funciona cuando lo visitas directamente pero aparece en blanco en contextos de terceros, revisa las reglas de bots y de hotlinking de tu CDN antes de suponer que el problema es el propio archivo.

Preguntas frecuentes

¿Puedo obtener un favicon sin descargar nada? Sí. Usa el Favicon Fetcher, pega el dominio y copia la URL directamente. No hace falta descargar nada a menos que quieras específicamente guardar el archivo PNG en local.

¿Cuál es la diferencia real entre favicon.ico y un favicon PNG? .ico es un formato contenedor que puede agrupar varias resoluciones en un solo archivo, que es por lo que se convirtió en el estándar histórico. PNG es más simple, comprime mejor y es a lo que las etiquetas modernas <link rel="icon"> suelen apuntar. Mantén un .ico en tu raíz como respaldo; usa PNG para todo lo que declares explícitamente en tu <head>.

¿Por qué mi favicon muestra el icono equivocado (el antiguo)? Casi siempre es la caché. Prueba una recarga completa o una ventana de incógnito antes de suponer que tu arreglo no surtió efecto. Si sigue mal después de eso, comprueba que tus etiquetas <link> apunten a la ruta real del archivo actualizado y no a un nombre de archivo obsoleto.

¿Necesito un favicon aparte para dispositivos Apple? Sí, si quieres que se vea bien. Sin una etiqueta apple-touch-icon que apunte a una imagen de 180x180, iOS generará una automáticamente a partir de tu favicon existente, normalmente recortándolo o escalándolo, y el resultado rara vez parece intencionado.

¿Vale la pena el esfuerzo de un favicon SVG? Vale la pena tenerlo como una mejora, no como para confiar solo en él. El soporte de favicons SVG dinámicos claro/oscuro todavía es inconsistente entre navegadores. Distribuye los tamaños PNG como tu base y añade SVG encima si quieres ese pulido extra.