Tanto en las páginas web personales como en las más profesionales podemos encontrar un icono en la barra de direcciones con el logotipo de la web, o cualquier otra imagen que la simbolice. Este icono lo puede definir el desarrollador de una manera sencilla, como veremos en el presente vídeo.

Este icono, muchas veces conocido simplemente como "favicon", lo podremos ver en varios sitios, como puede ser la barra de direcciones, a la izquierda de la URL, en el menú de favoritos (cuando el visitante marca la web como favorita) o en las pestañas. En ocasiones también podemos referirnos a él como Icono de Favoritos y es que favicon sería justamente su abreviación.

Hace años en DesarrolloWeb.com publicamos un artículo sobre este tema, cuando el icono de favoritos era una novedad. Sin embargo hace un tiempo la manera de incluir este icono se ha simplificado bastante, por lo que convenía actualizar nuestros tutoriales. Además, para agregar un valor añadido a este tutorial hemos pensado que sería interesante mostrar también cómo podríamos hacer nosotros mismos un icono con un programa gratuito. El texto del artículo antiguo se puede encontrar en Icono en Favoritos que además está complementado por los comentarios de decenas de personas. De hecho, hemos seguido la sugerencia del usuario "Spiderdraw" que comenta que ese icono se puede hacer con Gimp.

Como muchos sabrán, Gimp es un programa de edición gráfica de código libre y multiplataforma, que sería la alternativa gratuita más profesional al archiconocido Photoshop. Gimp tiene una opción para guardar como "ico", es decir, archivos con extensión .ico, que son los que necesitamos para definir el icono favicon.

En este vídeo mostraremos cómo se crea el icono en favoritos para una web, a partir del retoque de la imagen del logotipo de la web. Copiaremos la imagen que se utiliza como logo y la formatearemos para que tenga las dimensiones de 16x16 píxeles, que son las que necesitamos para el icono. Luego guardaremos ese archivo gráfico como "favicon.ico", para que los navegadores lo puedan reconocer.

El siguiente paso será subir el icono por FTP y colocarlo en la raíz del dominio, es decir, en el directorio raíz de publicación de nuestro sitio web. Como decimos, los navegadores buscarán automáticamente, sin que tengamos que indicarles nada, por el archivo "favicon.ico" de la raíz del dominio y lo mostrarán en la barra de direcciones, sin que tengamos que realizar ningún otro paso.

Al acabar el vídeo mostraremos simplemente cómo distintos navegadores muestran nuestro icono favicon. Lo mejor es que vosotros mismos sigáis las explicaciones y modos de trabajo que se ofrecen en el vídeo, que servirán para aprender a colocar nuestro icono favicon.ico y para aprender un poquito sobre el modo de trabajo con el editor gráfico Gimp.