Un favicon es el pequeño icono que aparece en las pestañas del navegador, marcadores, resultados de búsqueda y accesos directos de la pantalla de inicio móvil, y es uno de los elementos que más silenciosamente falla en los sitios web reales. Esta guía cubre todos los métodos para encontrar y comprobar el favicon de un sitio, el conjunto completo de tamaños que esperan los navegadores, las razones más habituales por las que un favicon no se muestra y cómo generar un conjunto correcto desde cero.
¿Qué es un favicon?
Un favicon (abreviatura de "favourites icon", icono de favoritos) es un pequeño archivo de imagen que representa a un sitio web en las pestañas del navegador, la barra de direcciones, los marcadores, las listas de historial y las páginas de resultados de los buscadores. Suele ser una imagen cuadrada de 16×16 o 32×32 píxeles, aunque los navegadores modernos solicitan varios tamaños según el contexto: un acceso directo en la pantalla de inicio de iOS necesita una imagen de 180×180 píxeles, mientras que una instalación PWA en Android necesita versiones de 192×192 y 512×512 píxeles.
Por qué los favicons importan más allá de la marca
Un favicon bien configurado aporta tres beneficios prácticos más allá de la identidad visual. Primero, Google muestra los favicons junto a los resultados de búsqueda en las SERP; un favicon ausente o roto muestra un icono de globo genérico, que da mala impresión. Segundo, los navegadores móviles usan los archivos de favicon para crear accesos directos en la pantalla de inicio; un sitio sin un icono táctil del tamaño correcto obtiene una captura de pantalla de baja calidad como acceso directo. Tercero, los favicons de pestaña ayudan a los usuarios a identificar y volver a tu pestaña cuando hay muchas abiertas.
El formato heredado favicon.ico
El formato `.ico` nació con Internet Explorer en 1999 y se convirtió en el valor por defecto universal porque los navegadores solicitan automáticamente `/favicon.ico` en la raíz de cada dominio, sin necesidad de etiqueta link. Un archivo `.ico` moderno es un contenedor que guarda varios tamaños (normalmente 16×16 y 32×32) en un único archivo. Pese a su edad, `favicon.ico` sigue siendo importante como alternativa universal para navegadores antiguos, clientes de correo y herramientas que no leen etiquetas link de HTML.
Note
Cómo encontrar el favicon de un sitio
Hay tres métodos fiables para encontrar la URL del favicon de un sitio. El más rápido resuelve la mayoría de los casos; los demás son alternativas para sitios con configuraciones personalizadas.
Método 1: la ruta por defecto /favicon.ico
Añade `/favicon.ico` a cualquier dominio y ábrelo en una pestaña. Por ejemplo: `https://example.com/favicon.ico`. Si aparece una imagen de icono en la pestaña y se renderiza en la página, el archivo existe y carga correctamente. Si ves una página de error o una página en blanco, el archivo no existe o el servidor está mal configurado. Este método funciona con la mayoría de sitios que usan la ruta convencional.
Método 2: ver el código fuente en busca de etiquetas link
Haz clic derecho en cualquier página y elige "Ver código fuente" (o pulsa Ctrl+U en Windows, Cmd+U en Mac). Busca en el HTML `rel="icon"` o `rel="shortcut icon"`. El valor del atributo `href` de la etiqueta `<link>` coincidente es la ruta exacta del favicon. Esto encuentra ubicaciones personalizadas: los sitios servidos desde una CDN suelen usar URLs absolutas como `https://cdn.example.com/assets/favicon.svg` en lugar de la ruta raíz por defecto.
Método 3: revisar el manifiesto de la app web
Las aplicaciones web progresivas declaran sus iconos en un archivo `manifest.json` enlazado mediante `<link rel="manifest">` en el head del HTML. Abre la URL del manifiesto y busca el array `icons`: cada entrada indica una ruta de imagen y su tamaño en píxeles. Así gestionan Android y Chrome las instalaciones PWA, y el manifiesto suele ser el único lugar donde se declaran las rutas PNG de 192×192 y 512×512.
Tip
Cómo comprobar si un favicon funciona
Comprobar que un favicon está bien configurado requiere más que confirmar que el archivo existe. Un favicon puede existir y aun así no mostrarse si el servidor devuelve el tipo de contenido equivocado, el archivo es demasiado pequeño para el contexto solicitado o el navegador tiene una versión en caché obsoleta.
Abre la URL del favicon directamente en una pestaña
Navega directamente a la URL del favicon, por ejemplo `https://tudominio.com/favicon.ico`. Si la imagen del favicon se renderiza en la pestaña y se muestra como icono en la barra de pestañas del navegador, el archivo se sirve correctamente. Si ves una página HTML o un error, la URL apunta al archivo equivocado o el servidor está redirigiendo la petición.
Comprueba la cabecera Content-Type de la respuesta
Abre DevTools, ve a la pestaña Network, recarga la página y filtra por la petición del favicon. Haz clic en la entrada del favicon y revisa la sección Response Headers. El `Content-Type` debe ser `image/x-icon` para archivos `.ico`, `image/png` para `.png` o `image/svg+xml` para `.svg`. Una respuesta con `text/html` significa que el servidor está devolviendo una página HTML, normalmente una página 404, en lugar del archivo de favicon real.
Verifica que las dimensiones de la imagen sean correctas
Descarga el archivo de favicon y comprueba sus dimensiones con el comprobador de dimensiones de imagen. Un `favicon.ico` debe incluir tamaños incrustados de al menos 16×16 y 32×32. Los iconos táctiles de Apple deben medir exactamente 180×180. Los iconos del manifiesto PWA deben ser 192×192 y 512×512. Un favicon con tamaño incorrecto se verá borroso o será ignorado silenciosamente por el navegador en ese contexto concreto.
Recarga forzada para saltarte la caché del favicon
Los navegadores guardan los favicons en caché de forma agresiva, a veces durante días. Si actualizaste tu favicon pero sigue apareciendo el antiguo, pulsa Ctrl+Shift+R (Windows/Linux) o Cmd+Shift+R (Mac) para forzar la recarga y que el navegador vuelva a pedir el icono. En Chrome también puedes hacer clic derecho en la pestaña, elegir "Recargar", o borrar la caché del favicon con DevTools → Application → Storage → Clear Site Data.
Confirma que el favicon no está bloqueado por robots.txt
Si tu favicon no aparece en los resultados de Búsqueda de Google, comprueba que tu `robots.txt` no desautoriza el acceso al archivo de favicon ni al directorio donde vive. El rastreador de Google obtiene los favicons de forma independiente y respeta `robots.txt`: una URL de favicon bloqueada hace que aparezca el globo genérico junto a tu sitio en las SERP. Usa el explicador de conflictos de reglas de robots.txt para verificar que tu configuración de robots.txt no bloquea la ruta del favicon.
Comprobador de Dimensiones de Imagen
Comprueba las dimensiones en píxeles de cualquier archivo de imagen al instante: confirma que tu favicon, icono táctil e iconos PWA tienen los tamaños correctos antes de añadirlos a tu HTML.
Tamaños y formatos de favicon
La cantidad de archivos de favicon que necesita un sitio bien configurado ha bajado notablemente gracias al soporte de los navegadores modernos. Entender qué tamaños siguen siendo necesarios, y cuáles ya son redundantes, te permite construir un conjunto de favicons mínimo y correcto.
| Archivo de favicon | Tamaño | Usado por | ¿Necesario? |
|---|---|---|---|
| favicon.ico | 16×16 + 32×32 | Navegadores antiguos, barras de marcadores | ✓ Sí - alternativa universal |
| favicon-32x32.png | 32×32 px | Navegadores modernos (pestaña) | ✓ Sí - PNG principal |
| apple-touch-icon.png | 180×180 px | Marcadores de pantalla de inicio iOS | ✓ Sí - requerido por iOS |
| icon-192x192.png | 192×192 px | Instalaciones PWA en Android | ✓ Sí - requerido por PWA |
| icon-512x512.png | 512×512 px | Pantallas de inicio PWA | ✓ Sí - requerido por PWA |
| favicon.svg | Escalable | Todos los navegadores modernos | ✓ Recomendado - reemplaza la mayoría de PNG |
| favicon-16x16.png | 16×16 px | Navegadores antiguos (pestaña) | ✗ Opcional - el .ico lo cubre |
| mstile-150x150.png | 150×150 px | Mosaicos de inicio de Windows 8/10 | ✗ Obsoleto - Windows 11+ lo ignora |
| browserconfig.xml | N/D | IE 11 / sitios anclados de Windows | ✗ Obsoleto - IE retirado en 2022 |
El argumento a favor de los favicons SVG
Los favicons SVG son compatibles con todos los navegadores principales desde 2021. Un único archivo `favicon.svg` se renderiza perfectamente a cualquier tamaño: 16×16 en una pestaña, 32×32 en una barra de marcadores o cualquier resolución intermedia en pantallas de alta densidad. SVG también admite una media query `prefers-color-scheme` dentro del propio archivo, lo que permite al favicon alternar automáticamente entre una versión clara y otra oscura según el tema del sistema. Un archivo SVG reemplaza todos los PNG de favicon excepto el icono táctil de Apple y los iconos del manifiesto PWA.
Note
Problemas comunes de favicon y soluciones
La mayoría de fallos de favicon caen en un número reducido de categorías predecibles. Cada uno tiene una solución directa en cuanto sabes dónde mirar.
El favicon no aparece en la pestaña del navegador
La causa más habitual es la falta de la etiqueta `<link rel="icon">` combinada con la ausencia del archivo `/favicon.ico`. Los navegadores recurren automáticamente a solicitar `/favicon.ico`, pero si ese archivo devuelve 404, no aparece ningún icono. Soluciónalo añadiendo el archivo en la raíz del dominio y una etiqueta `<link rel="icon" href="/favicon.ico">` en el `<head>` de tu HTML. Para rutas personalizadas la etiqueta link es imprescindible: el navegador no adivina ubicaciones personalizadas.
El favicon se muestra en blanco o como imagen rota
Un icono de favicon roto en la pestaña normalmente significa que el archivo existe pero no es un formato de imagen válido. La causa más común es guardar un archivo PNG con extensión `.ico` sin una conversión adecuada. Usa el detector de formato de imagen para confirmar el formato real del archivo: un archivo llamado `favicon.ico` puede ser internamente un PNG, un JPEG o un documento HTML. La solución es generar un `.ico` correcto con el generador de favicons.
Google muestra el favicon equivocado en los resultados
Google guarda los favicons en caché y los actualiza de forma independiente a los rastreos normales; puede tardar de días a semanas en mostrar un favicon nuevo en las SERP. Para acelerar el proceso: verifica que la URL del favicon sea de acceso público (no bloqueada por robots.txt ni protegida con autenticación), confirma que el archivo tiene la cabecera Content-Type correcta y solicita una reindexación en Google Search Console. Google exige un favicon mínimo de 48×48 píxeles para mostrarlo en las SERP; las imágenes más pequeñas se ignoran.
El favicon antiguo persiste tras una actualización
Las cachés de favicon de los navegadores son persistentes y no respetan las cabeceras de caché HTTP igual que los recursos normales. Una recarga forzada (Ctrl+Shift+R o Cmd+Shift+R) obliga a la mayoría de navegadores a volver a pedir el favicon. En Chrome puedes borrarla con DevTools → Application → Storage → Clear Site Data. Como estrategia de despliegue, cambiar el nombre del archivo de favicon o añadir una cadena de consulta anti-caché al href de la etiqueta link obliga a todos los navegadores a traerse la versión nueva de inmediato.
Warning
Generar un conjunto de favicons completo
Crear manualmente todos los tamaños de favicon necesarios desde cero es tedioso y propenso a errores. El enfoque práctico es partir de una imagen origen de alta resolución y generar automáticamente todos los tamaños requeridos.
Requisitos de la imagen de origen
- Mínimo 512×512 píxeles — es el tamaño requerido más grande (pantalla de inicio PWA) y sirve como origen de reducción para todos los tamaños menores
- Proporción cuadrada — los favicons siempre son cuadrados; un origen no cuadrado se recorta o se deforma
- Fondo transparente — un PNG transparente funciona mejor que un fondo blanco, que aparece como un cuadrado blanco en las pestañas con modo oscuro
- Diseño sencillo — el detalle fino y las líneas finas se ven borrosas a 16×16 px; los logos con trazos gruesos y poca complejidad funcionan mejor en tamaños pequeños
- Formato PNG o SVG — ambos conservan la calidad a cualquier tamaño; evita el JPEG, que introduce artefactos de compresión en los bordes duros
Usar el generador de favicons
Sube tu imagen de origen al generador de favicons e iconos de app. La herramienta genera el conjunto estándar completo: `favicon.ico` (16×16 y 32×32), `favicon-32x32.png`, `apple-touch-icon.png` (180×180), `android-chrome-192x192.png` y `android-chrome-512x512.png`, junto con las etiquetas link HTML exactas para pegar en tu `<head>`. Toda la generación se ejecuta en tu navegador; tu imagen nunca se sube a ningún servidor.
Generador de Favicons e Iconos de App
Sube una única imagen de alta resolución y genera el conjunto completo de favicons: ICO, todos los tamaños PNG, icono táctil de Apple, además de las etiquetas link HTML para copiar en tu sitio.
Analizar un conjunto de favicons existente
Si ya tienes un conjunto de favicons y quieres saber qué archivos son redundantes para los navegadores modernos, el analizador de tamaño de paquetes de favicon lista cada archivo de tu conjunto, identifica tamaños obsoletos (como los iconos iOS de 57×57 y 72×72 que el iOS moderno ignora) y recomienda el conjunto moderno mínimo. Reducir un conjunto inflado de 15 archivos a 5 reduce de forma significativa el peso de página en cada petición.
Buenas prácticas de favicon para 2026
El panorama de los favicons se ha estabilizado notablemente. Este es el consenso actual sobre la implementación mínima correcta para 2026.
El conjunto moderno mínimo de favicons
Necesitas cinco archivos y cinco etiquetas link. Añade `favicon.svg` como icono principal (todos los navegadores modernos), `favicon.ico` como alternativa (navegadores antiguos y herramientas que no parsean HTML), `apple-touch-icon.png` a 180×180 para iOS, y `android-chrome-192x192.png` más `android-chrome-512x512.png` referenciados en tu `manifest.json` para instalaciones PWA. Las etiquetas HTML de los tres primeros van en tu `<head>`; los iconos PWA se declaran solo en el manifiesto.
Los favicons SVG admiten modo oscuro, escalan perfectamente a cualquier resolución y reemplazan todos los tamaños PNG que necesitan los navegadores modernos. Favicon.ico existe puramente como alternativa para la larga cola de clientes que no son navegadores.
Favicons con modo oscuro
Los favicons SVG pueden incrustar una media query `prefers-color-scheme` para mostrar colores distintos en temas claros y oscuros del sistema. Es el único formato de favicon que admite iconos adaptados al tema sin JavaScript. Un favicon SVG con modo oscuro mantiene tu marca legible en temas de navegador oscuros, donde un icono claro puede llegar a desaparecer contra el fondo de la pestaña.
Tip
Key takeaways
- Encuentra el favicon de cualquier sitio añadiendo /favicon.ico al dominio o viendo el código fuente y buscando rel="icon".
- Un favicon puede existir y aun así no mostrarse si el servidor devuelve el Content-Type equivocado, la imagen tiene el tamaño incorrecto o el navegador tiene una caché obsoleta.
- Haz una recarga forzada (Ctrl+Shift+R / Cmd+Shift+R) para saltarte la caché de favicon del navegador al comprobar un icono actualizado.
- El conjunto moderno mínimo de favicons es: favicon.svg, favicon.ico (alternativa heredada), apple-touch-icon.png (180×180) y PNG de 192×192 + 512×512 para PWA.
- Usa el generador de favicons e iconos de app para producir todos los tamaños requeridos a partir de una única imagen origen de 512×512.
- Los favicons SVG son la mejor opción moderna: escalan perfectamente y admiten modo oscuro mediante media queries CSS dentro del propio archivo.
- Google exige un favicon mínimo de 48×48 px para mostrarlo en las SERP; verifica que sea de acceso público y que robots.txt no lo bloquee.