Aunque hoy en día la navegación por internet se realiza mayormente desde dispositivos móviles, muchas personas (incluyéndome) seguimos prefiriendo visitar nuestros sitios web favoritos desde un ordenador.
Si este es tu caso, seguramente al gestionar múltiples pestañas en el navegador habrás notado que muchas páginas web incluyen un pequeño ícono distintivo que aparece en la barra de direcciones. Este ícono se conoce como “favicon”.
En este artículo explicaremos, de manera sencilla, qué es un favicon y cómo podemos añadirlo a cualquier página estructurada con HTML.
Tabla de contenidos
¿Qué es un favicon?
Podemos definir como un favicon (abreviatura de “favorite icon”) como un pequeño icono gráfico el cual se encarga de representar visualmente a un sitio o página web en concreto.
Un favicon por lo general lo podemos encontrar en instancias como:
- La pestaña del navegador junto al título de la página.
- Los marcadores o favoritos de un navegador web.
- Los accesos directos de escritorio o móviles creados desde un navegador.
Entre las características de un favicon podemos destacar aspectos como:
Tamaño estándar: por lo general el tamaño más común de un favicon es de 16×16 píxeles, aunque también pueden existir versiones de 32×32, 48×48, 64×64 pixeles o más, dependiendo de la resolución que sea necesaria.
Formato de archivo: si bien el formato de un favicon más tradicional resulta ser “.ico”, es posible utilizar otros formatos de imagen como .png, .svg o incluso .gif. Todos estos formatos son compatibles con los navegadores modernos
Propósito: uno de los principales usos de un favicon es facilitar la identificación rápida de un sitio web desde la barra de direcciones, aportando un toque personal y reforzando la identidad de marca.
Para qué sirve un favicon
Si bien en su definición y características hemos podido conocer a grandes rasgos para qué puede servir un favicon, es cierto que su simple implementación se considera una mejora en la experiencia del usuario.
Es por ello que podemos presentar sus funciones de la siguiente manera.
Identificación visual: un favicon permite a los usuarios identificar de manera rápida un sitio web entre múltiples pestañas abiertas en el navegador o en la lista de marcadores, ya que actúa como un ícono distintivo.
Mejora la usabilidad: siguiendo el punto anterior, un favicon facilita una navegación más rápida e intuitiva. Gracias a su implementación, los usuarios pueden identificar fácilmente tu sitio web entre sus pestañas abiertas o en la lista de favoritos.
Branding: puede considerarse un favicon como una extensión visual de la marca, ayudando a reforzar la identidad y el diseño web como un conjunto. Un favicon bien diseñado proyecta profesionalismo y coherencia en la imagen del sitio.
Accesos directos: un favicon no solo se manifiesta en ordenadores de escritorio, si el sitio web es guardado en la pantalla de inicio de un dispositivo móvil o escritorio, por lo general el favicon será el ícono visible.
Aspecto profesional: aunque puede ser un elemento gráfico que pueda pasar desapercibido, de forma intuitiva, si notamos la ausencia de un favicon tendremos la percepción de que el sitio web luzca incompleto o descuidado, mientras que tener uno da un toque de atención al detalle.
Presencia en navegadores y aplicaciones: el favicon de un sitio web está más presente de lo que podríamos imaginar. Además de aparecer en los navegadores, también se muestra en los resultados de búsqueda, en los listados de favoritos e incluso en las miniaturas o vistas previas de las páginas web.
Ejemplos de favicon
Hemos mencionado que podemos encontrar un favicon en lugares donde no lo parece, podemos comenzar por su ubicación por defecto, la cual es junto al lado del título de una página en la pestaña de un navegador.
También lo podemos encontrar en los resultados de búsquedas concretas, como en el siguiente caso.
Una acción común es guardar páginas como favoritos en nuestro navegador de preferencia, estos sitios web además de mostrar su título también aparecen con su favicon.
¿Cómo añadir un favicon?
Existen varias formas de agregar un favicon a un sitio web. Generalmente, si nuestro sitio fue desarrollado en una plataforma en línea o mediante un CMS específico, las opciones suelen ser muy similares. Sin embargo, en este caso, nos centraremos únicamente en la sintaxis básica para sitios construidos con HTML y WordPress.
Añadir un favicon en HTML
Sabemos que un favicon se muestra justo al lado izquierdo del título de determinada pagina web; sin embargo, en un documento HTML suele ser colocado por medio de una etiqueta “link” justo después del título de la página.
Para que la imagen o el icono pueda mostrarse, debemos considerar que previamente debe incluirse en un directorio en específico para luego poder invocarlo.
También podemos destacar lo que hemos ya repasado, es posible usar múltiples formatos de imagen, siendo “.ico” el mas popular, pero otros son perfectamente válidos.
Imagen formato ICO
<link rel="icon" href="favicon.ico" type="image/x-icon">
Imagen formato PNG
<link rel="icon" href="images/favicon.png" type="image/png">
Imagen formato SVG
<link rel="icon" href="images/favicon.svg" type="image/svg+xml">
Por ultimo peor no menos importante, al usar la etiqueta “link” podremos encontrar el atributo “type”, el cual se encarga de especificar cuál es el tipo de archivo que se está vinculando.
Este atributo por lo general suele ser incluido para garantizar de que el favicon se visualice en navegadores más antiguos, lo que hace que no sea obligatorio su uso, aunque su inclusión se considera una buena práctica, asegurándonos de que pueda cargar la imagen o el icono sin problemas.
Añadir un favicon en WordPress
WordPress, uno de los CMS más populares, no puede pasar desapercibido, donde añadir un favicon resulta un proceso simple en unos pocos clics.
Desde las opciones de “Apariencia -> Personalizar -> Identidad del Sitio” podemos definir que imagen queremos que aparezca como el icono o el favicon del sitio web.
Este procedimiento puede ser realizado también desde el apartado de “Ajustes -> Generales” donde encontremos la opción de “Icono del sitio”.
Conclusión
La imagen o ícono conocido como favicon puede ser un elemento visual pequeño, pero su impacto va mucho más allá de su tamaño. Su uso trae consigo una serie de beneficios relacionados con la usabilidad y la identidad de marca.
Un sitio web con un favicon bien definido permite a los usuarios identificar fácilmente la página en pestañas del navegador, marcadores, accesos directos e incluso en los resultados de búsqueda, mejorando la navegación y la experiencia del usuario.
Además, el favicon es un elemento gráfico que refleja profesionalismo y atención al detalle, haciendo que el sitio web destaque. En la actualidad, se ha convertido prácticamente en un estándar moderno, con una relevancia similar a la de un logotipo.
Si bien tener un favicon no influye directamente en el posicionamiento o la optimización SEO, su presencia en los resultados de búsqueda puede aumentar la tasa de clics al hacer que el sitio sea más atractivo visualmente para los usuarios.
Conocer cómo añadir un favicon a nuestro sitio web, independientemente de la metodología o plataforma utilizada, es una herramienta visual adicional simple pero efectiva para reforzar la marca y mejorar la experiencia del usuario.
Tambien te puede interesar:
- Partes de una página web WordPress
- ¿Qué es un blog y para que sirve?
- ¿Qué es un eCommerce y para qué sirve?
- ¿Qué es CSS y para qué sirve?
- Mejores 10 editores de código para programar
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y Woocommerce en Webempresa.
