Modifica el favicon de tu blog

Actualización importante: Me comenta Max Birrax que todos los pasos que os explico en el post, sirven cuando vuestro navegador es Mozilla. Bajo el Explorer no funciona, por lo tanto, tampoco veréis modificado mi favicon si navegáis con I.E. Buscaré la forma y, cuando lo descubra, publicaré un nuevo post... De todas formas, no hacéis nada malo instalando y navegando con Mozilla. Así que, antes de nada, pediros disculpas...

Alguno ya os habréis dado cuenta, pero para los que no prestéis demasiada atención a este tipo de abalorios (pijadas, según otras fuentes consultadas...), he modificado el favicon del blog. Antes de que alguno de vosotros lo preguntéis, favicon (abreviatura del inglés "favorites icon") es el icono asociado a una página web, que aparece a menudo al lado de la dirección de la misma, en los favoritos junto al título de la página que allí tenemos guardada o junto a las pestañas abiertas por Mozilla. La imagen de la derecha es el favicon de blogger, conocido de sobra por la mayoría de nosotros, y el mismo que he conseguido reemplazar por otro que aparenta ser un tridente.

Seguramente haya otros métodos, pero el que os describo en este post, para los que ya tenéis un cierto nivel en estos temas, comprobaréis que es extremadamente sencillo. Como con tantas otras cosas relacionadas con blogger, el primer paso, y en muchas ocasiones el más importante, consistió en descubrir que era posible modificar el favicon, lo cual aprendí al conocer el blog de Logio, que tiene un favicon que me encanta. El resto es pan comido, ya veréis, pero lo voy a intentar explicar con todo lujo de detalles, para que los profanos como yo en HTML no se pierdan.

Lo primero será elegir un nuevo favicon para nuestro blog. Puede tratarse de una fotografía de vuestra propia biblioteca, pero deberéis tener en cuenta que, por lo reducido de su tamaño, resulta imposible apreciar ningún tipo de detalle. En este sitio encontraréis más de 400 favicones (¿se escribirá así el plural?), muchos de ellos bastante famosos. Bajo estas líneas podéis ver una selección con algunos de los que me he descargado yo...

Una vez que os hayáis decidido por alguno, guardad la imagen en vuestro ordenador: pinchando sobre ella con el botón derecho del ratón, "guardar imagen como". El nuevo favicon que hayáis elegido, que deberá tener formato jpg, gif o png, tendremos que subirlo a algún sitio de alojamiento de fotografías. Yo uso ImageShack porque me pareció bastante sencillo de usar. Pero podéis emplear cualquier otro, siempre que, al subir el archivo de imagen, nos devuelva una dirección URL, ya que la necesitaremos posteriormente. Os resumo rápidamente el proceso: una vez en ImageShack, os encontraréis una pantalla como la de la imagen inferior. Pinchamos primero en "Browse..." para buscar el archivo en nuestro ordenador. Una vez seleccionada, clicamos en "start upload!" para que la página inicie el proceso de carga de nuestra imagen.

Dependiendo del tamaño del archivo, puede tardar un tiempo en cargarse. Pero en este caso, la carga será bastante rápida porque el archivo del nuevo favicon debe pesar sólo 1 ó 2 Kb. Cuando la página haya concluido su proceso de carga, os aparecerá una pantalla como la siguiente imagen, donde encontraréis, entre otras cosas, una dirección URL referida a la imagen. Es la dirección "http" que está dentro de la línea roja, junto a "Direct link to image", o sea, "enlace directo a la imagen". Copiad esa dirección "http" (podéis pegarla en un archivo de texto, pero no de Word, usad el Bloc de notas)

Si a estas alturas de entrada, seguís leyendo, es que estáis de verdad decididos a cambiar de favicon. Lo que queda es lo más delicado del proceso, ya que tendremos que modificar la plantilla HTML, insertando el siguiente código:

Sustituiremos la parte {image url} por la dirección URL que hemos obtenido de la página donde hayamos alojado la imagen del favicon. En mi caso, el código definitivo quedó así:

Si no tenemos un poco de cuidado, modificar la plantilla HTML puede suponer, en el caso más extremo, que perdamos nuestro blog. Los que, como yo hace dos meses, no tengáis ni la más remota idea de lo que es la plantilla HTML, a grandes rasgos os diré que es el ADN de vuestro blog. Modificarla eliminando una línea, una letra o un espacio puede ser realmente grave si no sabéis lo que estáis haciendo, así que os voy a dar el consejo que me dio a mí Max Birrax en su día: creaos otro blog en el que hacer experimentos con la plantilla HTML, y al dar las condiciones iniciales, marcad la casilla para que los buscadores (google, yahoo...) no lo muestren entre sus resultados de búsqueda. A nadie le interesará visitar vuestro banco de pruebas, ¿no?

Pero si modificáis directamente la plantilla HTML de vuestro sitio, siempre, siempre, antes de tocar nada, debéis realizar una copia de seguridad de la misma: clicando en Descargar plantilla completa (en azul, subrayado, arriba a la derecha), guardamos el archivo en nuestro disco duro. Así, en caso de que tengamos algún problema, podremos recuperar la plantilla tal y como era antes de que la modificáramos...

Después de estos consejos, que nunca debemos olvidar ni tomar a la ligera, os cuento dóne está la plantilla HTML y cómo llegar a ella: clicamos en "Personalizar" (arriba a la derecha, desde la pantalla de inicio de vuestro blog), en la pestaña "Diseño", que es la que aparecerá por defecto, "Edición de HTML", hasta llegar a una pantalla como la de la imagen inferior. Si, en lugar de "Personalizar", lo que os aparece es "Crear un blog / Acceder", clicamos en "Acceder", introducimos nuestra contraseña de Blogger, y seguimos la ruta "Diseño", "Edición de HTML".

Localiza en tu plantilla el código . Lo encontraréis casi al final, justo después del código . Inserta el código de tu nuevo favicon justo entre ambos, exactamente como en la imagen siguiente. En rojo he marcado los códigos que debemos localizar en la plantilla, y en azul, la línea que debemos insertar.

Y listo. Clicamos en "guardar plantilla" (abajo a la izquierda) y, si todo ha ido bien, se habrá modificado el favicon de vuestro blog.

Fuentes: HapiBlogging y wikipedia.