Un favicon o icono de favoritos, del inglés “favorite icon”, es una pequeña imagen asociada con una página o sitio web en particular, cuyo nombre deriva del hecho de que los navegadores web lo suelen mostrar en las listas de marcadores o favoritos, en los historiales de páginas visitadas y de navegación reciente, así como en la barra de direcciones y en el encabezado de la pestaña correspondiente.
Qué es un favicon
El término favicon proviene de la terminología en inglés “favorite icon”, que significa icono de favoritos. Se denomina así porque es el icono que se visualiza en las listas de marcadores o favoritos del navegador. También aparece en otros lugares, como en la barra de direcciones y en el encabezado de las pestañas del navegador.
El favicon es una pequeña imagen que simboliza el sitio en que estamos, por lo que forma parte de la identidad del sitio. Además, esta imagen ayuda a la navegación del usuario, ya que permite reconocer la página de cada pestaña, cuando tenemos muchas abiertas en el navegador. La mayoría de webs utilizan su logotipo como favicon.
A su vez el favicon es utilizado por los favoritos del explorador para mostrar las páginas que has agregado. Cuando la página de origen no cuenta con un favicon, simplemente se muestra la dirección, lo que provoca que el usuario tenga que leer para identificar el sitio.
Por ello, aunque hay sitios que no utilizan favicon, son los menos, ya que el favicon resulta muy útil para potenciar la imagen de un sitio y facilitar la navegción.
Para establecer el favicon de un sitio web, se debe insertar en el head de la página una etiqueta link que apunte al archivo del favicon, por ejemplo:
<link rel=”shortcut icon” href=”http://example.com/favicon.ico” />
Por lo general, el favicon es una imagen de 16×16 pixels en formato ICO, un formato de archivo binario para iconos de Windows, aunque muchos navegadores soportan además para el favicon otros formatos de imagen diferentes a ICO, como PNG, GIF o JPG. También puede tener distintas ubicaciones o tamaños.
Aunque es habitual que el favicon sea un fichero de nombre favicon.ico ubicado en el directorio raíz del sitio web, esto no es obligatorio y puede tener cualquier nombre y estar localizado en cualquier ubicación.
Por ejemplo, el favicon de Wikipedia es http://en.wikipedia.org/favicon.ico:
Como vemos, los usuarios identifican las páginas por su favicon en forma inconsciente, por lo que abren las pestañas de favoritos en décimas de segundo y sin leer el nombre del sitio, sino a través de la identificación del icono.
Por lo tanto, si estás realizando un sitio web éste debe contar con un favicon para que sea más fácil de identificar por los usuarios en la red y así lograr una mayor memoria visual por su parte.
Cómo crear un favicon
Para crear y editar un favicon puede usarse un editor de imágenes estándar que permita dibujar pixel por pixel, o se puede usar un editor de iconos, que además de editor de imágenes incluye opciones avanzadas para iconos, como filtros, función para crear un icono a partir de una imagen o de la captura de una parte de la pantalla.
Existen aplicaciones web y programas para crear y editar iconos para todas las plataformas, así como también recursos online que permiten la elaboración rápida del favicon sin necesidad de tener grandes conocimientos de diseño.
Aunque los favicon empezaron teniendo un formato de archivo único (.ico) y unas características muy restrictivas en cuanto al tamaño (16×16 píxeles), éstas se han relajado en los últimos años. Desde 2020, tienen las siguientes características:
- Tamaño: 32×32 píxeles
- Colores: 8-bit o 24-bit
- Formato: PNG, GIF o ICO
Eso sí, dado que el favicon es una pequeña imagen cuadrada de sólo 32×32 pixels, es necesario que sea una imagen sencilla que permita una rápida previsualización, por lo que la imagen seleccionada no deberá contener texto ni muchos detalles.