miércoles, 29 de julio de 2009

Imagen blogger: añadir una imagen o icono a la barra de direcciones


Si quieres modificar la apariencia de la imagen que se muestra en la barra de direcciones del navegador cambiando el icono de blogger por uno propio tuyo en blogger te muestro a continuación los pasos que debes realizar -por cierto también serán válidos para cualquier otra página con la pequeña diferencia que también te mostraré.


En primer lugar crea una imagen "cuadrada" en cualquier editor de imágenes, tras ello sigue los siguientes pasos:

  1. Debemos convertir la imagen creada a formato .ico ya que en otro caso, algunos navegadores no lo interpretarán de manera correcta -lo ideal de tamaño 16x16-. Podemos optar por hacerlo de modo automático desde algún servicio online como Chami y nos descargamos el fichero comprimido generado. En el mismo incluirán la imagen en formato ico y otra en formato gif.
  2. Debemos subir las imagenes generadas a algún servicio de alojamiento gratuito, yo he empleado hostanyimage para la de formato "ico" y el propio blogger para el "gif".
  3. Una vez hemos albergado las imágenes en cualquier servicio debemos editar la plantilla de nuestro blogger, para hacerlo entramos en nuestro blog y vamos a: Diseño -> Edición de Html y buscamos el texto en rojo, entre el mismo insertamos las dos líneas que podéis ver, eso si, modificando la dirección de la imagen -en azul en el ejemplo- por la vuestra. En cualquier otro sistema simplemente añadir las líneas de en medio justo antes de la etiqueta </head>




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

<link href='http://www.hostanyimage.com/files/n141jzwsjn9pibz8o25w.ico' rel='shortcut icon' type='image/x-icon'/>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4W9HsW5JWwWo_fTsxtMBNo-kITQa2ACDkBrmgX_6HBrpoOWXqGvmt7K-Zf1qKhdvABlYtS8MmflskWNT-WO1SUXiY_HCWkIvO-g_TSmtEk-ASR5-Q1t6RCS__VRWorNrCa1O0fI4n2KE/s1600/animated_favicon2.gif' rel='icon' type='image/gif'/>

<title><data:blog.pageTitle/></title>

si con el método anterior no os funciona -es la que he usado ya que en chrome la anterior no me iba-, podéis probar añadiendo tras la finalización del title -texto en rojo- la siguiente línea


<title><data:blog.pageTitle/></title>
<link href='dirección del fichero ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Enlaces:
http://www.taringa.net/posts/ebooks-tutoriales/2636052/Insertar-favicon-en-blogger.html
http://www.bdebloggers.com/2008/12/05/trucos-blogger-crea-un-icono-para-la-barra-de-direcciones.html
http://www.chami.com
http://www.hostanyimage.com

2 comentarios:

Unknown dijo...

Muy interesante. Lo intentaré y ya te comento.

despe dijo...

te diré que siempre vengo aunque no comente pero si me apresento , muchas gracias por ir por mi casa, justamente ayer estaba leyendo este post y me fui al lugar donde albergas imagenes un beso y que la pases bien gracias por los consejos quiero poner un favicon en la barra de direcciones despe.