Favicon

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.

Favicon

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.

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:

Favicon de Wikipedia

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, así como extracción de iconos de los archivos binarios ejecutables EXE o bibliotecas DLL de Windows.

Existen 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.

Para crear un favicon con The GIMP (GNU Image Manipulation Program), el editor de bitmaps del GNU, partiremos de una imagen de 16×16 pixels y la guardaremos con la siguiente configuración:

  • 16×16 pixels.
  • 16 colores (4 bits).
  • Formato .ico.

Eso sí, dado que el favicon es una pequeña imagen cuadrada de sólo 16×16 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.

Los comentarios están cerrados.