Qué es un Favicon y cómo ponerlo en Blogger

Dentro de las formas de personalización más usadas en un sitio web o blog, nos encontramos al favicon. Puede parecer un pequeño detalle pero resulta ser más importante de lo que muchos creen a la hora de darle una identidad propia a nuestro sitio web o blog.

Un favicon, o favorite icon, no es nadamas que un pequeño icono que originalmente se utilizaba para que se mostrara al lado del nombre del sitio web en caso de que el usuario lo agregará a sus favoritos. Tiempo después, otros navegadores comenzaron a mostrar el favicon en la barra de direcciones y junto al nombre de la pestaña del sitio web. Este icono, tradicionalmente tiene un tamaño de 16 x 16 píxeles, aunque también se puede incluir con un tamaño de 32 x 32.



A la hora de crear un favicon, podemos echar mano de muchos programas de diseño gráfico como Gimp, Photoshop, o incluso Paint, pero a menos que quieras un trabajo muy detallado, resulta poco práctico y complicado para algunos. En esos casos, podemos utilizar varios servicios online que nos faciliten la tarea, y uno de los más sencillos es favicononline.es. Con este servicio, podemos crear nuestro favicon basándonos en una imagen ya existente de manera sencilla y rápida.

Para empezar, hay que tener preparada la imagen que queremos redimensionar para que sea nuestro favicon. Procura que no sea muy grande para que asi no se deforme mucho y se pueda distinguir. Una vez que ya la tengas lista, entra a favicononline.es y haz click en Subir Imagen para seleccionar el archivo que quieres convertir en tu favicon, elige el tamaño del favicon, puede ser de 16x16 o 32x32 píxeles. Ahora, solo haz click en el botón que dice Crear favicon para que el sitio haga el trabajo duro.

Espera un momento y podrás ver tu favicon ya creado, para descargar el favicon pon el cursor sobre el favicon y haz click con el botón derecho del ratón y "Guardar imagen como...", antes de guardarlo en tu pc cambiale el nombre y renombralo como favicon.ico y eso es todo. Es un proceso bastante sencillo y no tiene ninguna perdida. Un excelente servicio a la hora de crear el susodicho icono. Ver videotutorial



Si quieres crear un favicon animado entra a favicon animado y haz click en Subir Imagen. Ahora, solo haz click en el botón que dice Crear favicon, podrás ver tu favicon ya creado, junto con una pequeña vista previa para que veas como se verá el icono en el navegador. Hay tres versiones del icono, una clásica de 16 x 16, una más grande de 32 x 32 y otra de 16 x 16 animada en formato .gif, guarda la que dice animado favicon.gif.



Ahora hay que alojar el favicon en un servidor, aquí tienes dos sitios donde poder alojar tu favicon, Google sites y Fileden.

Una vez que ya tengas alojado tu favicon, ha llegado la hora de insertarlo en tu blog de blogger. Tendras que hacerle unas modificaciones básicas al código de tu plantilla para que todo esté listo.

Para empezar, asegurate de tener ya listo tu favicon. Recuerda que debe tener un tamaño de 16x16 o 32x32 y que debe estar en formato .ico. Una vez que ya lo tengas listo, entra a tu cuenta de Blogger y dirígete a la sección de Diseño>> Edición de HTML. Una vez ahí, tan solo busca la siguiente línea:



Para ubicarla más facilmente, puedes copiar la línea y luego oprimir control + f para activar la función de búsqueda de tu navegador. Una vez que ya tengas localizada esa línea de código, pega justo arriba las líneas necesarias para que se muestre tu favicon, las cuales son:


Reemplazaremos la parte que dice URL del favicon.ico por la URL de nuestro favicon. Son dos líneas de código ya que de otra forma Internet Explorer se hará un lío y tendrá problemas a la hora de mostrar el favicon. Ver videotutorial

Es muy recomendable que tu icono se encuentre en formato .ico, ya que aunque existen navegadores que ya reconocen iconos en .gif y .png, de vez en cuando causan problemas y pueden causar que tu icono simplemente no se muestre.

Eso es todo. Guarda los cambios en tu plantilla y a partir de ahora tus visitantes podrán ver tu favicon cuando visiten tu blog de blogger.

Fuente:http://www.faviconblogger.com/2010/11/favicon-blogger.html