Favicon ¿y eso qué es?

El favicon es una pequeña imagen que aparece junto a la dirección de una página web y que es un elemento más en la personalización de nuestro site. Muchas personas no le dan importancia o desconocen completamente las posibilidades que les ofrece la inclusión del favicon. Personalmente, soy un enamorado de estos iconos de tan sólo 16x16 píxeles y tanto Comunidad del Abeto como mis websites personales siempre lo han incorporado.



¿Cómo crear nuestro favicon?

Como decía anteriormente, un favicon es un pequeño icono de 16x16 pixeles. Así que el primer paso será crearnos una imagen de ese tamaño (por ejemplo con Photoshop o Gimp) y la guardaremos. Aqui hay que prestar atención, ya que esta imagen que creamos es un archivo jpg (si lo guardamos así) y lo que necesitamos nosotros para hacer el favicon es un archivo .ico (de iconos). Así que necesitaremos convertirlo. Para ello utilizaremos Dynamic y clickaremos en examinar, elegiremos la imagen que hemos creado y pulsaremos Create Icon (crear icono). Esto nos creará el .ico y lo descargamos a nuestro ordenador. Tan fácil como eso.


¿Cómo uso mi favicon?

Ahora que ya tenemos nuestro favicon en formato .ico, lo que tenemos que hacer ahora es subir esa imagen a algún hosting de imágenes que soporte los .ico si es que no disponemos de uno propio (caso de este blog, por ejemplo). Recomiendo usar IconJ, website dedicado a los iconos y que dispone de un apartado gratuito para alojar favicons. Una vez subido, apunta el código que te muestran, ya que es el que vamos a tener que usar en el código html de nuestra web. Y sino quieres o no puedes crear el tuyo propio, dispones de más de 18,000 en sus galerías.

En el código html de nuestro index.html (o en el código de nuestro blog) deberemos introducir la línea:

<link rel="shortcut icon" type="image/x-icon" href="http://sitio.com/favicon.ico">

Donde deberemos reemplazar 'http://sitio.com/favicon.ico' por la url del favicon que subimos en IconJ (o bien de nuestro propio hosting). Y debemos colocarla justo antes del cierre de la etiqueta de la cabecera </head > Guardaremos los cambios y ya está listo, ya tenemos nuestro propio favicon personal. Voilá!

Extra: si lo que quieres es un favicon con movimiento, créalo apartir de un gif animado o bien elije uno de los de las galerias de IconJ.