Cómo poner un favicon en Blogger

Es normal que muchos no sepan qué es un favicon, pues es relativamente corto el tiempo que ha pasado desde su creación. Bueno, pues un favicon es el ícono de un sitio web que aparece en la barra de direcciones; en la lista de favoritos (o marcadores); en el historial web; y en la pestaña del navegador. O sea en estos lugares:

¿Que para qué sirve? Basicamente para que los usuarios tengan más fácil acceso a los sitios que visita mediante el reconocimiento de íconos, o sea por mejor accesibilidad.

Bueno, ahora vamos a poner el favicon a nuestro sitio.

1. Primero debes tener la imagen que quieres usar como favicon (generalmente el logo de tu página) en formato jpg, bmp, gif o png en medidas de 16 x 16px o 32 x 32px.
2. Ahora hay que convertir esa imagen en formato .ico y para ello puedes hacer uso de cualquier página web que nos dé este servicio, como por ejemplo Dynamic Drive. Puedes usar tu favicon en formatos png o gif pero si quieres que se vea en Internet Explorer entonces deberá estar en formato ico.
Entonces haz click en Examinar y busca la imagen en tu equipo. Luego click en Create Icony descarga en tu ordenador la imagen en formato .ico
3. Ahora necesitas subir el ícono en un servidor gratuito, aquí puedes elegir el que quieras, siempre y cuando hagas público el archivo. Yo les recomiendo Dropbox pues acepta toda clase de archivos.
4. Ya que has subido el ícono al servidor entra en Blogger > Diseño > Edición de HTML, busca al inicio de la plantilla esta etiqueta:
   

   <b:skin><![CDATA[/*

   
   Justo arriba de ella pega este código:

<link href='URL del favicon' rel='shortcut icon' type='image/x-icon'/>
<link href='URL del favicon' rel='icon' type='image/x-icon'/>

El código debe verse así:

Obviamente tú debes sustituir donde dice URL del favicon por la dirección donde tienes alojado el ícono. Si deseas que el favicon sea animado entonces lo haces en formato .gif
Algunos dicen que sólo basta poner la primera línea del código, pero yo les recomiendo que usen los dos, ya que algunos exploradores como el Internet Explorer no siempre muestran los favicones.

ACTUALIZACIÓN 1: Si el favicon no se ve, entonces pega el código después de esta etiqueta:

<b:include data='blog' name='all-head-content'/>

ACTUALIZACIÓN 2: Es posible que si el favicon no se ve tengas que pegar el código después de la etiqueta </head>>

Imprimir artículo