Cómo añadir un favicon en HTML (y qué etiquetas rel usar)

Añadir un favicon a tu sitio web debería ser una de las tareas más simples en el desarrollo web, pero hace tropezar a los desarrolladores más a menudo de lo que podrías esperar. Entre consejos contradictorios sobre qué etiquetas <link> usar, valores confusos del atributo rel y navegadores que cachean obstinadamente el icono antiguo, lograr que un favicon aparezca realmente puede parecer un juego de adivinanzas.

La verdad es que la configuración de favicon para la mayoría de los sitios web se puede reducir a un solo archivo y una sola etiqueta HTML. Esta guía elimina el ruido y te da exactamente lo que necesitas: la configuración mínima práctica, las variaciones de etiqueta rel más útiles e instrucciones claras para lidiar con problemas de caché que hacen invisible tu nuevo favicon.

Si aún no tienes un archivo favicon.ico, crea uno con Any2ICO en menos de un minuto. Acepta PNG, SVG, JPG, WebP y otros formatos, y produce un archivo ICO multitamaño que funciona en todas partes. Luego vuelve aquí para conectarlo a tu HTML.

La configuración de favicon más simple

Antes de profundizar en variaciones de etiquetas y casos especiales, aquí está el enfoque que funciona para la gran mayoría de los sitios web. Requiere un archivo y una línea de HTML.

Coloca favicon.ico en la raíz de tu dominio. Sube o despliega tu archivo favicon.ico para que sea accesible en https://tudominio.com/favicon.ico. Esta es la ruta que los navegadores han verificado por defecto desde finales de los años 90. Incluso sin ninguna etiqueta HTML que apunte a él, la mayoría de los navegadores encontrarán y mostrarán un favicon en esta ubicación automáticamente. Esta convención está integrada en el comportamiento del navegador y no va a desaparecer.

Añade una etiqueta link a tu head HTML. Aunque la convención de la ruta raíz funciona por sí sola, añadir una etiqueta explícita elimina toda ambigüedad y asegura un comportamiento consistente entre navegadores, subdominios y aplicaciones de una sola página donde la raíz del documento puede no mapearse directamente a la raíz del servidor.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Título de tu página</title>
  <link rel="icon" href="/es/favicon.ico" sizes="any">
</head>
<body>
  <!-- tu contenido -->
</body>
</html>

Esa única etiqueta <link> es suficiente para todos los navegadores principales: Chrome, Firefox, Safari, Edge e incluso versiones antiguas de Internet Explorer. El atributo sizes="any" le dice al navegador que el archivo ICO contiene múltiples resoluciones y que debe seleccionar la más apropiada para el contexto actual, ya sea un icono de pestaña de 16x16 o un icono de marcador de 32x32.

Esta es la configuración que recomendamos para la mayoría de los sitios web. Es simple, fiable y universalmente soportada. Puedes detenerte aquí y tu favicon funcionará correctamente en prácticamente todos los escenarios.

Caché y "favicon que no se muestra"

Desplegaste tu nuevo favicon, actualizaste la página y el icono antiguo te sigue mirando desde la pestaña del navegador. Esto no es un error en tu código. Es casi seguro un problema de caché, y es con diferencia la razón más común por la que los desarrolladores piensan que su configuración de favicon está rota cuando en realidad funciona perfectamente.

Los navegadores cachean los favicons agresivamente. A diferencia de los recursos de página regulares, los favicons a menudo se cachean por separado y por períodos mucho más largos. Chrome, por ejemplo, almacena favicons en una base de datos dedicada que no siempre responde a una recarga normal de página. Firefox y Safari tienen un comportamiento similar. Esto significa que incluso después de reemplazar el archivo en tu servidor, el navegador puede continuar mostrando el icono antiguo durante horas o incluso días.

Recarga forzada: Presiona Ctrl+Shift+R (Windows/Linux) o Cmd+Shift+R (macOS) para saltarte la caché y recargar todos los recursos desde el servidor. Esto funciona para la mayoría de los recursos de página pero no siempre limpia la caché de favicon específicamente.

Ventana de incógnito: Abre tu sitio en una ventana de navegación privada o de incógnito. Esto comienza con una caché completamente vacía y cargará el favicon fresco desde el servidor. Si ves el favicon correcto en modo incógnito, tu configuración es correcta y la sesión de navegación normal simplemente necesita tiempo para detectar el cambio.

Limpiar la caché del navegador manualmente: Si el modo incógnito confirma el nuevo favicon pero tu sesión regular sigue mostrando el antiguo, limpia las imágenes y archivos cacheados de tu navegador. En Chrome, ve a Configuración, Privacidad y seguridad, Borrar datos de navegación, y selecciona Imágenes y archivos en caché. Después de limpiar, recarga tu sitio.

Añadir una cadena de consulta para forzar la recarga: Como medida temporal durante el desarrollo, puedes añadir una cadena de consulta para forzar al navegador a tratar el favicon como un recurso nuevo: <link rel="icon" href="/es/favicon.ico?v=2" sizes="any">. Incrementa el número de versión cada vez que actualices el favicon. Elimina la cadena de consulta una vez que estés satisfecho con el icono, o mantenla como una estrategia de versionado permanente.

Tamaños y elección de archivo: ICO vs PNG

¿Deberías usar un archivo ICO, un archivo PNG o ambos? La respuesta depende de cuánta complejidad quieras en tu configuración y qué navegadores necesites soportar.

ICO es la opción universal. El formato ICO ha sido el formato estándar de favicon desde que Internet Explorer 5 introdujo los favicons en 1999. Cada navegador que soporta favicons soporta ICO. Un solo archivo ICO puede contener múltiples tamaños (16x16, 32x32, 48x48 y más), así que el navegador siempre tiene la resolución correcta disponible sin que necesites mantener archivos separados para cada tamaño. Por simplicidad y máxima compatibilidad, ICO es la apuesta más segura.

PNG es una alternativa moderna. Todas las versiones actuales de Chrome, Firefox, Safari y Edge soportan favicons PNG a través de la etiqueta <link rel="icon" type="image/png">. Los favicons PNG son ligeramente más simples de crear (un solo archivo PNG a un tamaño) pero necesitas un archivo y etiqueta separados para cada tamaño que quieras proporcionar. Esto puede significar dos o tres etiquetas link adicionales en tu head HTML.

SVG es la opción más nueva. Los favicons SVG son soportados en Chrome, Firefox y Edge, pero no en Safari a principios de 2025. Un favicon SVG escala perfectamente a cualquier tamaño, lo cual es atractivo para pantallas de alta resolución. Sin embargo, la falta de soporte en Safari significa que aún necesitas un respaldo ICO o PNG.

Para la mayoría de los sitios web, recomendamos el enfoque pragmático: usa un archivo ICO multitamaño como tu favicon principal y opcionalmente añade un icono PNG o SVG como mejora. Esto te da compatibilidad universal a través del archivo ICO y optimización moderna a través de los formatos adicionales. Para un desglose detallado de qué tamaños incluir y por qué, consulta nuestra guía de tamaños de favicon explicados.