Un favicon en HTML es un pequeño icono o imagen que se utiliza para representar un sitio web en la pestaña del navegador, en la barra de direcciones y en la lista de marcadores o favoritos. El término «favicon» es una combinación de las palabras favorite («favorito») e icon («icon») y se utiliza para identificar visualmente un sitio web de manera rápida y fácil.
Generalmente, el favicon se muestra en formato cuadrado y tiene un tamaño muy reducido, comúnmente de 16x16 píxeles o 32x32 píxeles. Aunque es pequeño, es importante para la identidad visual de un sitio web y puede ayudar a los usuarios a reconocer y recordar el sitio.
![<< [Plantilla gratuita] >> Plantillas de códigos de programación para HTML.](https://no-cache.hubspot.com/cta/default/53/bb3e5cad-5b6c-4956-a702-59b9da03864a.png){kind=small}
Para qué sirven los faviconos
- Identidad visual: son una parte esencial de la identidad visual de un sitio web. Proporcionan una manera rápida y visualmente efectiva para identificar y recordar un sitio web, lo que puede ser especialmente útil cuando los usuarios tienen múltiples pestañas abiertas en su navegador.
- Profesionalismo: incluir uno en tu sitio web muestra atención al detalle y un cierto nivel de profesionalismo. Un favicon bien diseñado puede contribuir a la percepción positiva de tu sitio por parte de los visitantes.
- Facilidad de acceso: también pueden ayudar a los usuarios a identificar rápidamente tu sitio en la barra de marcadores o favoritos de su navegador, lo que facilita el acceso a tu sitio en futuras visitas.
- Personalización: pueden ser personalizados para reflejar la marca o el tema de tu sitio web, lo que permite una mayor coherencia en la experiencia del usuario.
- Formatos compatibles: aunque el formato de archivo estándar para los faviconos es «.ico», muchos navegadores modernos también admiten formatos de imagen como PNG y GIF, lo que brinda cierta flexibilidad en su diseño.
- Fácil implementación: agregar un favicon a tu sitio web es una tarea relativamente sencilla. Solo necesitas incluir una etiqueta <link> en la sección <head> de tu documento HTML y asegurarte de que la ruta al archivo del favicon sea correcta.
Pasos para poner un favicon en HTML
1. Crea el icono favicon
En primer lugar, debes generar el icono que deseas utilizar al crear un favicon. El favicon es una imagen cuadrada generalmente de 16x16 píxeles o 32x32 píxeles, aunque algunos navegadores admiten tamaños más grandes. Puedes crear esta imagen utilizando software de diseño gráfico o generadores en línea.
2. Guarda la imagen
Guarda la imagen en un formato adecuado, como «.ico» para una compatibilidad máxima. También, puedes usar formatos como «.png» o «.gif», pero asegúrate de que la imagen esté en el tamaño y formato correctos.
3. Sube el favicon a tu servidor
Debes asegurarte de que el archivo de favicon esté alojado en el servidor donde se encuentra tu sitio web, de modo que los navegadores puedan acceder a él.
4. Añade el código HTML
Abre el archivo HTML de tu página web y agrega el siguiente código dentro de la sección <head> del documento. Reemplaza "ruta_al_favicon.ico" con la ruta correcta hacia tu archivo de favicon en el servidor.
<link rel="icon" href="ruta_al_favicon.ico" type="image/x-icon">
5. Salva y sube la página
Guarda los cambios en tu archivo HTML y luego súbelo a tu servidor web, si es necesario.
Al final, abre tu sitio web en un navegador web y verifica que el favicon se muestre correctamente en la pestaña del navegador y en otros lugares relevantes.
Ejemplos de faviconos
Con este código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bienvenidos al curso de Python</title>
<link rel="icon" href="C:\Users\w\OneDrive\Desktop\icons8-python-32.png" type="image/x-icon">
</head>
<body>
<h1>Bienvenidos al curso de Python</h1>
<!-- Contenido de la página -->
</body>
</html>
Logré añadir esta imagen:
Y, en el segundo caso:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bienvenidos al curso de Go</title>
<link rel="icon" href="C:\Users\w\OneDrive\Desktop\Go-Logo_Blue.svg" type="image/x-icon">
</head>
<body>
<h1>Bienvenidos al curso de Go</h1>
<!-- Contenido de la página -->
</body>
</html>
Obtuve este resultado:
En cambio, en otro caso:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bienvenidos al curso de Java</title>
<link rel="icon" href="C:\Users\w\OneDrive\Desktop\java.png" type="image/x-icon">
</head>
<body>
<h1>Bienvenidos al curso de Java</h1>
<!-- Contenido de la página -->
</body>
</html>
Y aquí vemos el resultado:
Los faviconos son elementos muy reducidos pero importantes en la construcción de una página web, son pequeños detalles que pueden tener un impacto significativo en la experiencia del usuario y en la imagen de tu sitio web. Como puedes ver, considerar esto al usar un creador de páginas web o lanzar una landing page gratis puede contribuir a una presencia en línea más sólida y profesional.
