Cuando vemos estas imágenes sabemos directamente de que páginas web estamos hablando. Si todas estas imágenes son favicons, entonces ¿Qué es  un favicon?

Simplemente, es el icono asociado a una página web en particular, el cual te permite identificarla fácilmente. Esta imagen la puedes observar en la barra de direcciones, pestañas, marcadores, historial, y toda vez que se haga referencia a la misma. La asociación entre el título de la página y su favicon se vuelve intrínseca, ya que nuestro cerebro reconocerá más rápido y fácil la imagen que el mismo dominio o nombre de la página web visitada,  por eso la creación y elección del mismo debe ser pensada y analizada como parte de nuestra identidad.

Este icono o como lo llamaremos de ahora en adelante, favicon, tiene características técnicas especiales. Una es el tamaño, el cual generalmente es 16 x 16 pixeles y otro el formato, donde es recomendable el formato .ICO. Si bien ahora la mayoría de navegadores también soportan formatos .GIF, .PNG lo recomendable es convertirlos a .ICO para que no haya inconvenientes de incompatibilidad. Aunque esto no debe ser tema de preocupación, también explicaremos luego como realizar la conversión.

Mi Imagen= Mi Favicon

Para crear tu favicon necesitas crear la imagen que representara tu página web. Ten en cuenta que tu imagen será pequeña, como has podido observar, así que deberá ser una imagen fácil de reconocer y entender, así también, es recomendable que tenga uno o pocos colores.

Ejemplo:

Este favicon es simple y fácil de reconocer

Para crear tu imagen tienes dos opciones:

1. Ingresa a cualquier página web que te permita crear tu favicon, por ejemplo http://www.faviconer.com/, sigue las instrucciones y al finalizar podrás bajar tu imagen con formato .ICO a tu computadora sin ningún inconveniente.
2. Utiliza cualquier editor gráfico, como Photoshop o el de tu elección, crea tu imagen y grabarla en formato .GIF o .PNG, siendo este último la mejor opción por la calidad de imagen que se observara a la hora de ser visualizado en los navegadores. Podrás hacerlo de 64X64 y cuando lo necesites redimensionarlo en 32X32 y 16X16 pixeles.

Favicon para www.tupagina.com

Una vez que tienes la imagen que vas a utilizar, puedes ingresar a cualquier página que te permita generar tu favicon, es decir cambiar de formato .PNG o .GIF, a formato .ICO.

OJO! No puedes solo cambiarle la extensión al archivo, tienes que utilizar cualquiera de estos convertidores.

En esta opción también puedes utilizar http://www.faviconer.com/, y otros como estos y muchas más.

Algunas páginas te permitirán hacer modificaciones de último momento, para detalles que se ven borrosos o excesivos al momento de reducirse el tamaño.

Por el contrario, otras simplemente se encargaran de convertir  tu archivo.

En cualquier de los dos casos podrás bajar el icono a tu computadora si ningún problema.

Parte final, subir favicon a mi página web

Para finalizar ahora solo me queda colocar en mi página web el favicon creado, lo recomendable es colocarlo en la carpeta raíz de tu página web. Es decir, si mi dominio es www.tupagina.com, el favicon debería estar en www.tupagina.com/favicon.ico.

Para lograr esto, modificaremos nuestro código HTML. Solo tenemos que colocar un elemento LINK entre las etiquetas de tus ficheros HTML. Por ejemplo

Si usas formato .ICO

<linkrel=”shortcut icon” href=”http://www.tupagina.com/favicon.ico” />

Si usas otros formatos, la extensión cambiara .PNG o .GIF

<link rel=»shortcut icon» type=»image/png» href=»http://www.tupagina.com /favicon.png» />

Como dijimos líneas arriba también podrás usar formatos.png o .gif pero no será  compatible con navegadores antiguos.

¿Se animan a colocar un favicon?