Como agregar favicon al blog de Blogger

jueves, 24 de enero de 2008

Como agregar favicon al blog de Blogger

En este post aprenderemos como agregar un favicon a nuestro blog de Blogger o página web en general, lo unico que necesitamos es una imagen que convertiremos a favicon con una herramienta online y editar unas líneas del código de la plantilla. Esta entrada ha sido actualizada de la original anteriormente posteada.

Para los que no manejen los términos, un favicon es el icono que aparece al lado de nuestro website (en Firefox siempre visible, en IE aparece cuando es añadido a Favoritos):

Aqui indico como se hace:

Lo primero que debemos elegir es una imagen cuadrada no muy grande (para evitar que se pixelee demasiado), de unos aprox 250 x250 px como máximo, luego de esto usaremos la siguiente herramienta obtenida de Dynamic Drive:

http://tools.dynamicdrive.com/favicon/

Al acceder al enlace anterior, en la parte inferior de la herramienta hacen clic en Examinar, eligen el archivo de imagen que usaran como icono y luego hacen clic en "Create ICON"

COMO CREAR UN ICONO PERSONALIZADO

Aqui les dejaré la imagen que usaremos como icono:

Seguimos los pasos (mencionados arriba), Examinar, Create icon y se nos mostrará una previsualizacion de como se verá nuestro icono. Luego click en "Download Favicon" para descargarlo, con eso lo guardan en su pc y asegúrense que quede guardado con el nombre favicon2.ico (si no pueden ver las extensiones es conveniente que lo habiliten: MI PC> Herramientas> Opcione de Carpeta> Ver> Ocultar las extensiones para tipo de archivo conocido - dejar desmarcado).

Luego que tienen el favicon en su pc lo deben subir a algun hosting que soporte este tipo de archivos, les recomiendo que se creen una cuenta en:

http://pages.google.com/

Para que puedan subir sus archivos (revisar este artículo de GooglePages como almacén gratuito de archivos), sino tambien pueden usar como tripod, 100webspace, etc. Para los que no puedan o sepan subir archivos a Google pages, envieme un mensaje para poder ayudarlos.

Con eso tendrán la url que supondremos sera:

http://www.myweb/favicon.ico

Luego que tenemos el favicon subido a internet solo resta colocar el codigo. Abrimos la Edicion de Plantilla. Luego buscan el tag </head> dentro de la plantilla y copian este codigo:

<link href='http://www.myweb/favicon.ico' rel='shortcut icon'/>

Solo recuerden reemplazar http://www.myweb/favicon.ico por la dirección donde tienen ustedes alojado su favicon (recomendable Google Pages). Y obtendran algo como esto:

Deben tener en cuenta que el nombre del favicon (si es que está subido a GooglePages) debe ser favicon2.ico, sino la imagen que mostrará sera la del favicon.ico por defecto de Google pages que es