Créa un Favicon para tu página web

Primero lo primero, ¿Qué es un Favicon?
De acuerdo con la Wikipedia: «Un favicon, del inglés favorites icon (icono de favoritos), también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular. Los navegadores gráficos suelen mostrar el favicon de la página visitada, si ésta lo posee, en la barra de direcciones y en el encabezado de la pestaña correspondiente. Asimismo los utilizan para identificar más fácilmente las páginas, presentándolos junto a sus respectivos títulos, en las listas de marcadores o favoritos, en los historiales de páginas visitadas y de navegación reciente, y toda vez que deban hacer referencia a ellas.»
Para ilustrar mejor de lo que hablamos fijémonos en la imágen de acá abajo donde se muestra más claramente el famoso Favicon en la práctica:

¿Qué características debe tener un Favicon?
Para crear un Favicon que funciones en casi todos los navegadores Web, el mismo debe cumplir con ciertas caraterísticas básica:

• El tamaño de la imágen debe ser un cuadrado de 16 x 16 píxeles.
• El formato de colores utilizado debe ser de 16 colores (4 bits).
• La imágen debe estar en formato ICO. No BMP, no GIF, no JPG.

Hay algunos navegadores que permiten el uso de imágenes de mayor tamaño, con un formato de colores de mayor capacidad y en otros formatos de archivo (BMP, GIF, JPG, etc.) pero si se desea que el icono funcione a la primera en la mayoría de los casos, lo recomendado es que cumpla con los parámetros anteriormente descritos.

¿Qué herramientas se pueden utilizar para crear un Favicon?
Existen programas especializados que pueden ser utilizados para la creación de este tipo de imágenes pero, siempre buscando la economía, acá damos varias herramientas en línea que permiten crear Favicons completamente grátis y sin la necesidad de instalar algún software en tu PC.

• Favicon.cc: Es una de las herramientas en línea más fáciles de utilizar que hay disponibles, se pueden crear los iconos a partir de una imágen que se puede subir a la página o crearlo desde cero pixel por pixel.
• 256pixels.com: Aquí se te permite crear tu favicon pixel por pixel con vista previa y recientemente (según la página)agregó la opción de subir imágenes propias. Igual que la anterior, esta herramienta también funciona directamente enlínea.
• Favicontool.com: Aquí solo se crean los Favicon en línea a partir de las imágenes que el usuario suba al sitio. No permite editar o crear el icono pixel por pixel pero ofrece el crear tu propia página de creación de Favicos por un costo.
• Webscriptlab.com: Como en la mayoría de los otros sitios, te permite generar un favicon subiendo una imagen pero te permite crearlos en en dos tamaños: 16 x 16 y de 32×32. Como otro detalle ofrece la creación de iconos tipo «cargando» o «loading». Recomendado para páginas que utilicen Ajax.
• Favicongenerator.com: Crea los favicon a partir de una imágen que se suba en 5 pasos. También incluye instrucciones sobre como aplicarlo a una página web con código html, buen dato.
• Dagondesign.com: Más que una herramienta para editar y crear Favicons, es mas bien una herramienta de conversión de formato. Aqui lo que se hace es subir una imagen de 16 x 16 pixeles en cualquier formato (.GIF, .PNG, .JPG, .BMP, etc.) y la página lo convierte a formato .ICO en un paso.
• Favicon.ru: Página rusa que, al igual que la mayoría de las herramientas en línea, ofrece crear un Favicon ya sea desde cero pixel por pixel o subiendo una imágen propia. La diferencia es que es caso de que no estés contento con ninguno de tus diseños puedes contratar el servicio de «profesionales» en el ramo.

Ya tienes el icono ¿Cómo se utiliza?
Para poder utilizar el favicon creado, se deben seguir los siguientes pasos:

Primero debe subirse este archivo a un área o carpeta pública de tu web hosting y que pueda verse directamente desde un navegador, por ejemplo: http://www.miwebsite/images/favicon.ico.

Incluir el código html que le dirá al navegador la ubicación del Favicon de nuestra página. Para esto abrimos con cualquier editor web (Dreamweaver, FrontPage, etc.), aunque también se puede abrir con un editor de texto como Notepad, la página principal de nuestra web. Para este caso usaremos como ejemplo index.html. El código que vamos a introducir, lo tenemos que escribir en cualquier área que este entre las etiquetas <head> y </head> (a toda esta sección se le conoce como cabecera o Header). El formato del código HTML a utilizar es el siguiente:

<link rel=»shortcut icon» href=»http://www.miwebsite/images/favicon.ico»>

Recordemos que toda la ruta http://www.miwebsite/images/favicon.ico debe ser reemplazada por la ruta del archivo Favicon.ico que estén utilizando en su página web. Es importante que además de la ruta completa se utilice el nombre del archivo incluyendo su extensión de archivo .ICO.
Luego de esto guardamos los cambios y actualizamos el archivo editado en el servidor del hosting donde esté nuestra página web.

¿Realmente es necesario un Favicon?
La respuesta es si y no. Técnicamente una página web puede funcionar completamente y sin problemas sin la necesidad de incluir un Favicon. El uso de un Favicon mas que una necesidad es mas bien una ventaja.
Pero, si no ofrece realmente una utilidad ni es necesario para el funcionamiento de una página web, ¿qué tipo de ventaja no da un Favicon? pues la ventaja de tener un Favicon radica en algo que va más allá de la utilidad e incluso de la estética en sí misma: es la identidad de la página web y esto se logra mayormente con una especial atención a los detalles. Uno de estos detalles es el Favicon.