Tutorial: Cómo cambiar el favicon de vuestro blog

Una corta introducción

La nueva interfaz de Blogger, entre otras cosas, nos permite cambiar el favicon de nuestro blog desde la plantilla, sin necesidad de implementar código adicional.

Estupendo, diréis algunos... pero, ¿qué es el favicon?

El favicon es ese pequeño icono que aparece junto a la barra de direcciones (y en algún otro lugar) y que identifica el sitio web. El de Blogger es esta "B" blanca sobre fondo naranja:

Aquí podéis ver la disposición de los favicones en el explorador de Mozilla:

 

Y aquí podéis ver lo estiloso que queda El rebaño del lobo en la lista de blogs de La vieja calle del panadero:

Lo siento, sibarita, pero tendrás que seguir mi consejo para que tu blog luzca así de aparente... :P

Cómo diseñar nuestro favicon paso a paso (poco más o menos)

Lo primero es elegir una imagen, la cual (o una parte de ella) convertiremos en nuestro icono. Yo he elegido esta:

Los requisitos de Blogger para la imagen que utilizaremos son los siguientes: la imagen debe ser cuadrada y pesar menos de 100kb. En teoría, después es Blogger el encargado de transformar la imagen en .ico (formato de icono de windows) y reducirla a 16x16 o 32x32 píxels de resolución. Por si acaso (podríais necesitarlo para otra cosa) os enseñaré a hacer esto también.

Utilizaremos Gimp, un programa que podéis descargar gratuitamente.

Una vez abierto el programa, hacemos click en Archivo/Nuevo... y en el cuadro de diálogo que aparecerá a continuación elegimos una resolución de imagen de 32 píxels de ancho por 32 de alto.

Una vez hecho esto, abriremos la imagen en cuestión como una capa o layer haciendo click en Archivo/Abrir como capas... y seleccionando el archivo concreto.

Naturalmente, no veréis un pimiento ya que la capa seguramente será mucho mayor de 32x32px. Pero no os preocupéis, fiaros de mí y pronto tendremos listo nuestro favicon. 

Os recomiendo que aumentéis el zoom (ctrl + rueda del ratón) hasta tener centrada el área de trabajo.

PixelS... PIXELS!!! PIXEEEEEEEELS!!!!!

Ahora, nos toca reescalar la capa para ajustarla a nuestro fondo de 32x 32, haciendo click en Capa/Escalar capa... (asegurándonos de tener seleccionada la capa de nuestra imagen).

No tenéis por que escalar la imagen exactamente a 32x32, sino utilizar este margen como límite para encuadrar en él la sección de imagen que queréis incluir en el icono. Yo, por ejemplo, escalo la imagen a 42x34. Debéis ir probando las distintas resoluciones (no importa no acertar o pasarse) e ir recolocando la imagen con la herramienta de desplazamiento (la que tengo seleccionada en la captura anterior). 

Una vez encontréis el tamaño y encuadréis la imagen, deberíais tener algo así:

El área resaltada en rojo es el tamaño total de la imagen, incluyendo lo que nos sobra.

No os preocupéis por el pixelado, tiene que ser así. En la vista previa, a la derecha, podéis ver que el icono se ve perfectamente al reducirse de tamaño.

A continuación, debemos eliminar ese exceso. Para ello, nada más fácil que hacer click en Capa/Nuevo desde visible. Una vez hecho esto, eliminamos las capas sobrantes haciendo click derecho en ellas y pulsando Borrar la capa. Solo debería quedarnos la capa de nombre Visible. 

Ahora, guardamos nuestra imagen (Archivo/Guardar como...) en formato [.ico].

 

...y ya tenemos nuestro flamante favicon!!!

Colgando nuestro favicon

Desde el apartado de Diseño de nuestro blog (lo conocéis todos, ¿verdad?) tenemos desde hace no mucho tiempo la opción de incluir nuestro favicon:

Esto es una gran mejora, ya que antes era necesario editar el código HTML de nuestra plantilla, lo que puede ser muchísimo más aparatoso.

No olvidéis que, para que vuestro favicon aparezca en el explorador, probablemente tengáis que reiniciar el explorador y limpiar caché y cookies.

Espero que os pongáis a ello, a ver si conseguimos que desaparezca de la blogosfera esa B  blanca y naranja tan aburrida y simplona :S.