Agregar Favicon en tu Blogger

Un favicon es un icono o logotipo que se puede asociar a una página web, y que algunos navegadores muestran en sus barras de dirección o lista de favoritos. Algunos favicons famosos son el de Wikipedia Wikipedia, o el de Yahoo! Yahoo!.

Blogger también permite poner favicons a tu blog. Los pasos para hacerlo son bastante sencillos:
  1. Crea una imagen, más o menos cuadrada, con el logotipo que quieras usar como favicon de tu blog. También puedes usar una imagen ya existente. Yo he creado la siguiente imagen para convertir el favicon de revistavirtual:

  2. Una vez que tengas generada la imagen con tu logotipo, necesitas convertirla a un icono de 16x16 píxeles. Si generas un icono con formato .ico podrá ser visible tanto en Internet Explorer como en Firefox, mientras que si generas tu icono en cualquier otro formato gráfico (.png, .jpg, .gif, etc.) sólo podrá ser visible en Firefox (y en otros buenos navegadores como Opera, Konqueror, etc.) pero no en Internet Explorer.

    En nuestro caso, yo he usado la web FavIcon from Pics para generar mi favicon. Simplemente tienes que introducir tu imagen original en el campo "Image to Use", presionar el botón "Generate FavIcon.ico" y obtendrás un fichero .zip con tu favicon en varios formatos (incluye .gif y .ico). Para nuestro blog, usaremos el formato .ico

  3. Una vez generado tu favicon, necesitas subirlo a un servidor desde el que pueda ser cargado por tu blog. Yo utilice fileden te creas una cuenta free acount una vez creada subes tu favicon.ico el cual te dara una ruta en mi caso fue esta http://www.fileden.com/getfile.php?file_path=http://www.fileden.com/files/2008/9/27/2118351/favicon.ico pero solo debes copiar la ruta apatir del http://www.fileden.com/files/2008/9/27/2118351/favicon.ico (lo que esta marcado con azul)

  4. Por último, necesitas incluir el favicon en la plantilla de tu blog. Despues de creado la ruta del icono, nos situamos en Diseño/Edición HTML y se busca el siguiente código:
    <title><data:blog.pageTitle/></title>

    Y justo antes se coloca lo siguiente:

    <link href= "http://sitio.com/favicon.ico" type="image/x-icon" rel="shortcut icon"/>
    <link href= "http://sitio.com/favicon.ico" type="image/x-icon" rel="icon"/>

    Donde http://sitio.com/favicon.ico es la URL de tu favicon (ahi pegas la ruta que te mencione en el paso 3).
Listo la próxima vez que accedas a tu blog, deberías ver un icono en la barra de direcciones de tu navegador. 

2 comentarios:

sandivina dijo...

Buenas, queria felicitarte por la clara manera que has tenido a la hora de explicar como incluir el favicon, la verdad que he leido al respecto en muchos blogs y me he parado a comentarte a ti porque realmente ha sido muy conciso y transparente.

Sandivina

Anónimo dijo...

y si no tengo html.... y es un web en flash?? ayudaaa pleaseee

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika