El favicon es el pequeño icono que aparece en la pestaña del navegador, junto al título de una página web. También puede mostrarse en favoritos, accesos directos, marcadores del navegador y resultados visuales en algunos dispositivos.
Aunque parece un detalle pequeño, ayuda mucho a que una web se vea más profesional, reconocible y cuidada. Si estás creando tu primera página con HTML, aprender a colocar un favicon es un paso sencillo pero importante.
En esta guía aprenderás cómo poner un favicon en HTML, qué etiqueta debes usar, dónde colocarla y qué formatos de imagen son los más recomendables.
Qué es un favicon
Un favicon es un icono asociado a una página web. Normalmente representa el logo, una inicial, un símbolo o una versión simplificada de la marca.
Por ejemplo, cuando tienes varias pestañas abiertas en el navegador, el favicon te ayuda a identificar rápidamente cada sitio web.
En una web profesional, el favicon forma parte de la identidad visual. No afecta directamente al contenido, pero sí mejora la presentación y la experiencia del usuario.
Para qué sirve un favicon
El favicon sirve principalmente para identificar visualmente una web. Es especialmente útil cuando el usuario guarda una página en favoritos o tiene muchas pestañas abiertas.
También ayuda a reforzar la marca. Un sitio con favicon transmite una sensación más completa que una página donde aparece el icono genérico del navegador.
En proyectos personales, portfolios, blogs o páginas de empresa, añadir un favicon es una forma simple de mejorar el acabado visual del sitio.
Cómo poner un favicon en HTML
Para poner un favicon en HTML debes usar la etiqueta link dentro de la etiqueta head del documento.
Ejemplo básico:
<link rel="icon" href="favicon.ico" type="image/x-icon">Esta línea le indica al navegador que use el archivo favicon.ico como icono de la página.
La estructura completa quedaría así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página web</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Bienvenido a mi página web</h1>
</body>
</html>Lo importante es que la etiqueta del favicon vaya dentro del head, no dentro del body.
Dónde guardar el archivo favicon
Lo más sencillo es guardar el archivo del favicon en la misma carpeta donde está tu archivo index.html.
Ejemplo:
mi-proyecto/
├── index.html
└── favicon.icoEn ese caso, el código sería:
<link rel="icon" href="favicon.ico" type="image/x-icon">Si prefieres guardar el favicon dentro de una carpeta, por ejemplo img, entonces la ruta debe cambiar:
mi-proyecto/
├── index.html
└── img/
└── favicon.pngCódigo:
<link rel="icon" href="img/favicon.png" type="image/png">La ruta del href debe coincidir exactamente con la ubicación real del archivo.
Usar favicon en formato PNG
Aunque el formato clásico es .ico, hoy también es muy común usar imágenes .png.
Ejemplo:
<link rel="icon" href="favicon.png" type="image/png">El formato PNG es cómodo porque conserva buena calidad y permite transparencia. Para muchos proyectos sencillos, usar un favicon en PNG es suficiente.
Una medida frecuente para favicon es 32×32 píxeles o 48×48 píxeles. También puedes usar tamaños mayores, pero el icono debe verse claro incluso cuando aparece muy pequeño.
Usar favicon en formato ICO
El formato .ico sigue siendo una opción muy compatible para favicon.
Ejemplo:
<link rel="icon" href="favicon.ico" type="image/x-icon">Una ventaja del archivo .ico es que puede incluir varios tamaños dentro del mismo archivo. Por eso durante mucho tiempo ha sido el formato más usado para favicons.
Si estás creando una web sencilla, puedes usar PNG. Si quieres máxima compatibilidad, puedes usar ICO.
Usar varios favicons
En proyectos más completos, puedes incluir diferentes versiones del favicon para distintos dispositivos.
Ejemplo:
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">Esto permite que el navegador o dispositivo elija el icono más adecuado según el contexto.
Para empezar, no necesitas complicarte demasiado. Un favicon principal bien configurado suele ser suficiente.
Ejemplo recomendado para una web moderna
Una configuración práctica sería esta:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi sitio web</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>El símbolo / al inicio de la ruta indica que el archivo está en la raíz del sitio web.
Por ejemplo:
tusitio.com/favicon.ico
tusitio.com/favicon-32x32.png
tusitio.com/apple-touch-icon.pngEsta estructura es útil cuando ya estás trabajando con una web publicada.
Qué imagen usar como favicon
Lo ideal es usar una versión simple de tu logo. No conviene poner una imagen con demasiado texto o muchos detalles porque el favicon se verá muy pequeño.
Buenas opciones para favicon:
Una inicial de la marca
Un símbolo simple
Un icono relacionado con la web
Una versión reducida del logo
Un diseño con buen contrasteSi tu logo completo tiene texto, quizá no se lea bien como favicon. En ese caso, es mejor usar solo un símbolo o una letra representativa.
Errores comunes al poner un favicon en HTML
Uno de los errores más comunes es colocar la etiqueta link fuera del head. El favicon debe ir dentro de esa sección.
Otro error frecuente es escribir mal la ruta del archivo. Si el navegador no encuentra la imagen, no podrá mostrar el favicon.
También puede ocurrir que el navegador siga mostrando el favicon anterior por caché. En ese caso, prueba actualizar la página con recarga completa, abrir en modo incógnito o cambiar ligeramente el nombre del archivo.
Otro error es usar una imagen demasiado grande, pesada o con detalles pequeños. El favicon debe ser ligero y fácil de reconocer.
Por qué no aparece mi favicon
Si el favicon no aparece, revisa estos puntos:
El archivo existe en la carpeta indicada
La ruta del href está bien escrita
La etiqueta link está dentro del head
El formato de imagen es correcto
El navegador no está mostrando una versión guardada en cachéTambién puedes probar abriendo directamente la ruta del favicon en el navegador. Por ejemplo:
tusitio.com/favicon.icoSi la imagen no carga, el problema probablemente está en la ruta o en la ubicación del archivo.
Favicon y SEO
El favicon no es un factor SEO principal, pero sí forma parte de la presentación de la web. Una página con favicon se ve más cuidada y puede ayudar a mejorar el reconocimiento de marca.
Además, cuando el usuario guarda tu sitio o lo identifica entre varias pestañas, el favicon facilita la navegación.
No hará que una página suba automáticamente en Google, pero sí contribuye a una experiencia más profesional.
Preguntas frecuentes sobre favicon en HTML
¿Dónde se pone el favicon en HTML?
El favicon se coloca dentro de la etiqueta head usando una etiqueta link.
<link rel="icon" href="favicon.ico" type="image/x-icon">¿Qué formato debe tener un favicon?
Puede ser .ico, .png, .svg o .jpg, aunque los formatos más usados son .ico y .png.
¿Qué tamaño debe tener un favicon?
Los tamaños comunes son 16×16, 32×32 y 48×48 píxeles. Para una web moderna, un favicon de 32×32 suele funcionar bien.
¿Puedo usar un PNG como favicon?
Sí. Puedes usar PNG con esta etiqueta:
<link rel="icon" href="favicon.png" type="image/png">¿Por qué mi favicon no se ve?
Puede ser por una ruta incorrecta, caché del navegador, formato no válido o porque la etiqueta no está dentro del head.
Para Finalizar
Poner un favicon en HTML es sencillo, pero mejora mucho la presentación de una página web. Solo necesitas tener tu icono preparado y añadir una etiqueta link dentro del head.
Para un proyecto básico, puedes usar:
<link rel="icon" href="favicon.ico" type="image/x-icon">O si usas PNG:
<link rel="icon" href="favicon.png" type="image/png">Recuerda usar una imagen simple, ligera y fácil de reconocer. Un buen favicon hace que tu web se vea más profesional y ayuda a que los usuarios la identifiquen rápidamente.
