Cuando desarrollamos un sitio Web, ya sea personal, de alguna comunidad o bien de un producto o servicio que queramos ofrecer, siempre existen pequeños detalles que nos permiten resaltar el sitio sobre otras alternativas y darle un estilo que lo haga cada vez más único.

Uno de esos detalles es el favicon, el cual a pesar de ser utilizado en gran parte de los sitios más importantes de Internet, hay muchos que no lo incorporan y/o no se dan cuenta de su importancia.

Hoy, en CLH, en un sencillo tutorial, les enseñaremos a crear y añadir un favicon a sus sitios Web. Todo el detalle, como siempre, después del salto.

Cómo crear y añadir un favicon a tus sitios Web

Antes de entrar de lleno al procedimiento, vamos con lo primero y más esencial:

¿Qué es un favicon?

Un favicon, o ícono de página como es conocido también, es una pequeña imagen que se asocia a un sitio Web en particular y que es representativa de el. Muchas veces se utiliza el logotipo del sitio (especialmente si hay una marca detrás) o bien alguna imagen que sea característica del contenido entregado en el.

¿Dónde y cuándo se utilizan los favicon?

A pesar de que el primer y más obvio lugar a donde se asocia un favicon es a la barra de direcciones cuando cargamos el sitio, no es el único lugar donde aparece. Como veremos a continuación, hoy en día el favicon aparece en varios lugares que representan al sitio Web, como por ejemplo:

1.- Barra de direcciones: Tal como lo mencionabamos, si un sitio cuenta con un favicon, al momento de cargarlo, este aparece al lado izquierdo de la barra de direcciones:

2.- Pestañas del navegador: En caso de que estemos utilizando un navegador que soporte el uso de pestañas, y las tengamos activas, el favicon aparecerá también al costado izquierdo de la pestaña donde hemos cargado el sitio:

3.- Menú de Favoritos: Si hemos guardado como favorito algún sitio que contenga un favicon, al revisar el menú de favoritos (o marcadores según el navegador que estemos usando), aparecerá:

4.- Barra de favoritos: Al igual que en el ítem anterior, pero si ahora el favorito lo tenemos en nuestra barra de favoritos (en caso de que el navegador lo soporte):

¿De qué se compone un favicon?

Un favicon se compone basicamente de 2 cosas:

1. Una imagen que cumpla con las características necesarias para ser considerada favicon.
2. Un trozo de código en HTML.

Vamos con lo primero:

Una imagen que cumpla con las características necesarias para ser considerada favicon:

Así es, lamentablemente no cualquier imagen puede ser utilizada como favicon, ya que debe cumplir ciertos requisitos. Sin embargo, que no cunda el pánico (¿o que no panda el cunico?), ya que cualquier imagen puede ser adaptada para que sea favicon. Lo más importante es que cumpla con lo siguiente:

• Tamaño: A pesar de que oficialmente los favicon deben tener un tamaño de 16px por 16px, hoy los navegadores reconocen favicons de 32px por 32px.
• Profundidad de color: 8 bit, aunque hay algunos navegadores que reconocen de 24 bit.
• Formato: El formato oficial de los íconos es .ICO, a pesar de que los nuevos navegadores reconocen íconos animados en formato .GIF o .PNG

Como podemos ver, los requisitos son pocos, y pueden ser alcanzables con cualquier imagen que transformemos.

Adicionalmente, necesitamos un trozo de código en HTML, que veremos más adelante cuando lo implementemos.

¿Cómo hacer un favicon?

Ok, mucho blabla, hora de la acción. Para hacer nuestro favicon, tenemos 2 posibilidades:

1. Usar un editor de imágenes que soporte el formato .ICO
2. Utilizar algún servicio Web que realice el proceso.

1- Usar un editor de imágenes que soporte el formato .ICO: Increiblemente uno pensaría que es la opción más sencilla. Sin embargo, puede convertirse en la más engorrosa.

¿Por qué?, porque los editores de imágenes más conocidos (entre ellos Photoshop) no soportan el formato .ICO, al menos no por defecto. En el caso de Photoshop debemos instalar un plugin extra llamado Ico Format, el cual nos permite hacer la exportación, lo que lo termina convirtiendo en un proceso que toma mucho más tiempo del que una operación de este tipo debiese tomar.

Adicionalmente hay otras alternativas de software, tanto libres como de licencia comercial que nos permiten obtener el resultado deseado, pero ninguna destacable, al menos en tiempo, con la segunda opción que presentaremos.

2.- Utilizar algún servicio Web que realice el proceso: Y es aquí donde nos enfocamos.

Afortunadamente en nuestra querida Internet, donde hoy en día podemos encontrar prácticamente todo (incluso la carta que envió Dexter a las Spice Girls para que no se separaran hace unos años), es posible dar con varios sitios que ofrecen servicios de conversión de imágenes a formato .ICO en solo segundos, como por ejemplo:

• Favicon Tool
• Favicon.cc
• HTML Kit

Cada una de aquellas alternativas presenta ventajas y desventajas sobre las otras. Desde cargar una simple imagen y convertirla, hasta dibujar el favicon o generar uno a partir de nuestra cuenta de Twitter.

En solo segundos podremos tener nuestro favicon a disposición, con lo que solo nos faltaría implementarlo.

Implementando un favicon en nuestro sitio Web

La implementación de un favicon en nuestro sitio Web es extremadamente sencilla y consta de solo 2 pasos:

1. Subir la imagen al servidor donde tenemos alojado nuestro sitio Web.
2. Añadir el código HTML a la(s) página(s) donde mostraremos el favicon.

Para subir la imagen al servidor, podemos utilizar un cliente FTP cualquiera y subirla, tal como hemos subido los otros archivos que componen el sitio.

Ahora, el código HTML que debemos añadir, es solo una línea, la cual debe ser incluida entre las etiquetas head y /head:

<link rel=”shortcut icon” href=”nombre del icono.ico” />

donde lo que va dentro del atributo href representa la ruta y nombre del ícono que hemos subido al servidor. Añadiendo esa línea y actualizando la página en el servidor, podremos recargarla y ver que el ícono se ha añadido satisfactoriamente.

Nota: Es muy probable que al subir el archivo y recargar, el favicon no se muestre. Esto puede deberse a que el navegador que utilizamos tenga nuestro sitio almacenado en su caché en una versión anterior y por ende no lo despliega. La solución es simple, podemos cerrar y volver a abrir el navegador y cargar la página o bien eliminar el caché, en las opciones del navegador.

Añadiendo un favicon en un blog de WordPress:

Para estos casos, la operación es exactamente la misma. El truco es encontrar el archivo donde debemos añadir la línea.

La gran mayoría de las plantillas que utilizamos en WordPress, utilizan un archivo llamado header.php en donde van todas las etiquetas HTML correspondientes a la cabecera del blog. Solo debemos ubicar las etiquetas head y /head e insertar el código entremedio de ellas. Así de simple.

Y bueno, ahora que hemos implementado, estamos listos para disfrutar, pero antes:

¿Por qué debiera añadir un favicon a mi sitio?

Es una buena pregunta. Si bien tener un favicon le da un valor agregado a un sitio Web, no es de vida o muerte tenerlo, y aquellos sitios que no los tienen no son realmente mejores o peores que los que si los tienen. No obstante, hay ventajas en tener un favicon implementado en el sitio, como por ejemplo:

• Los usuarios reconocen con mayor facilidad a nuestro sitio.
• Hay un mayor acercamiento a nuestra marca y/o logo.
• Dar un aspecto más profesional al sitio.

No son razones menores, por lo que es bueno considerarlo.

Y así de sencillo es que podemos tener un favicon para nuestros sitios Web, así que a intentarlo.

Como siempre, recuerden que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.