Favicon.ico en Internet Explorer para Blogger (Crear favicon, hosting y código HTML )

Para poner un Favicon en Blogger para Internet Explorer vea la siguiente nota, ahora ya es posible asignar un favicon: Asignar un favicon interno en Blogger.

Después de probar un par de horas finalmente he podido hacer que el favicon funcione correctamente en Internet Explorer y no es que sea un gran logro, lo que hablaría mal del programa, pero da demasiada lata hasta para lo más elemental.

Este tutorial permite implementar el favicon en todos los navegadores actuales incluyendo a Internet Explorer [No se garantiza su funcionamiento en IE7 y IE8, vea las conclusiones al final de la página].

Necesitan dos condiciones para lograrlo:

1. Descargar IrfanView, un programa de visualización gratuito con su paquete de plugins instalado.
2. Tener un servicio de hosting alterno a Blogger, sitios como Fileden y Google sites no sirven, debe ser un servicio web tradicional como www.zymic.com (gratuito) que permite usar FTP para subir los archivos [Ver tutorial].
3. El archivo debe llamarse favicon.ico

Convirtiendo una imagen en archivo ICO

Necesitamos una imagen que hayan diseñado en su programa favorito de edición de gráficos cuyos lados sean de 16 x 16 pixeles y en un formato PNG que es el que mejor respeta los colores Web, aunque vale JPG o BMP.

Abrimos el archivo con Irfan View donde nos dará en la barra de estado el tamaño y profundidad de la imagen en este caso de 16 x 16 pixeles por 24 Bpp (Bit por pixel).

Pulsamos en File ► "Save as...":

En la ventana de guadado que se abre en Tipo eligen "ICO - Windows icon":

 En la ventana que aparece al lado "PNG/PNM/ICO save options" asegúrense de desmarcar Save Transparent Color o Internet Explorer no reconocerá el ícono:

Nombren el archivo como favicon.ico y pulsen en Guardar para crear el archivo ICO:

Agregando el favicon.ico a Blogger
Ahora lo subimos a nuestro servidor externo como zymic.com copiando su dirección absoluta o dirección web completa, por ejemplo; mi archivo ICO lo hospedé en http://matioquia.zzl.org/favicon.ico, una vez hecho esto vamos al escritorio de blogger Blogger, nos vamos a Diseño ► Edición HTML.

y antes de la etiqueta </head> pegamos:

<link href='https://misitioweb.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='https://misitioweb.com/favicon.ico' rel='icon' type='image/x-icon'/>

Donde para mi caso reemplazo misitio.como por la dirección de mi favicon. matioquia.zzl.org/favicon.ico, para que quede:

<link href='http://matioquia.zzl.org/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://matioquia.zzl.org/favicon.ico' rel='icon' type='image/x-icon'/>

Unicamente es necesaria la primera linea de código en Internet Explorer 9, la segunda linea de código es para los vínculos de Favoritos de Internet Explorer 7 y 8, que en Windows 7 y Vista serán reemplazados por la versión 9 obligatoriamente a partir del 21 de Marzo de 2011.

Así es como quedó en mi caso:

Pulse en Guardar plantilla:

Abra la dirección en Internet Explorer 9, al final de la carga de la página aparecerá el icono en la pestaña y en Favoritos si pulsa CTRL + D:

Conclusiones
No sé porqué Internet Explorer no soporta la transparencia de lo archivos ICO, pero si desactivarlos me permite usar la misma instrucción en todos los navegadores actuales, no me importa.

Como ya dije Internet Explorer 7 y 8 serán eliminados en Windows 7 y Vista, remplazándose por la versión 9 de forma obligatoria a partir del 21 de Marzo de 2011, lo que garantiza la compatibilidad de este tutorial.