jueves, 20 de julio de 2006

Cómo usar un favicon en blogger


Actualización (17/03/2009)


He creado un nuevo post explicando cómo poner un favicon en la nueva versión de 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. Si usas Windows, lo más sencillo es que abras el Paint y lo dibujes. También puedes usar una imagen ya existente. Yo he creado la siguiente imagen para convertir en favicon de Gran Isla:

    Favicon de Gran Isla



  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 "Source Image", presionar el botón "Generate FavIcon.ico" y obtendrás un fichero .zip con tu favicon en varios formatos (incluye .png y .ico). Para nuestro blog, usaremos el formato .png.


  3. Una vez generado tu favicon, necesitas subirlo a un servidor desde el que pueda ser cargado por tu blog. Lo más sencillo es que lo subas a tu cuenta de Flickr o cualquier otro servicio que permita guardar ficheros.

    Otro truquillo con blogger consiste en iniciar un nuevo artículo en tu blog, incluir la imagen de tu favicon (y subirla al servidor de blogger), luego copiar la dirección en la que blogger ha guardado tu imagen y cancelar la edición del post. Así tendrás alojado tu favicon directamente en los servidores de blogger.


  4. Por último, necesitas incluir el favicon en la plantilla de tu blog. Abre el código de tu plantilla, e introduce las siguientes líneas de código entre las etiquetas <head> y </head>:

    <link rel="icon" href="DIRECCION_DE_TU_FAVICON" type="image/png">
    <link rel="shortcut icon" href="DIRECCION_DE_TU_FAVICON" type="image/png">


Et voilà! La próxima vez que accedas a tu blog, deberías ver un iconito en la barra de direcciones de tu navegador. Ojo! Si usas Internet Explorer no lo verás, al menos en las versiones actuales. ¿La solución? Esta:

Get Firefox!

34 comentarios:

  1. Favicon, Favicon...tiriti ti ti
    Favicon, Favicon...tiriti ti ti
    oé si tiene ritmo y todo, jeje.

    Bueno, ese cuadradito minúsculo le dará un toque "glam" a tu blog...pero 'poc a poc'. De todas formas, aparte del estilo que es lo que entra por los ojos, lo importante es el contenido, y GI siempre tiene post muy interesantes. Adelante!

    ResponderEliminar
  2. Jeje, sí que tiene coña el nombrecito :-)

    ResponderEliminar
  3. Grazas...a meirande axuda que tiven en moito tempo

    ResponderEliminar
  4. me encanta la entrada, pero lo he intentado y algo va mal... pues blogger me dice que no está correcto el código (y que conste que lo he puesto ok)

    alguna solución?

    ResponderEliminar
  5. Pedro, el problema que has tenido es muy típico. Blogger busca para todos los tags < tag> un final de tag < /tag>. Pero para algunos tag no es necesario poner el final de tag (img, br). La "solución" radica en poner al final un slash. Quedaría así:
    < link rel="icon" href="DIRECCION_DE_TU_FAVICON" type="image/png" />
    < link rel="shortcut icon" href="DIRECCION_DE_TU_FAVICON" type="image/png" />

    ResponderEliminar
  6. hola!
    he intentado hacerlo como deciis
    de las dos formas
    pero a mi no me lo permite
    estoy usando la plantilla blogy-neoneon.
    podrias ayudarme

    ResponderEliminar
  7. Excelente tutorial, lo pobrare a ver si sale el invento, todo sea por personalizar nuestras páginas. Feliz Navidad

    ResponderEliminar
  8. gracias me sido me mucha ayuda

    nosekedecir.blogspot.com

    ResponderEliminar
  9. Bueno, yo la verdad no pude poner el favicon en mi blog =/ queria saber si es posible que lo hagas vos si te mando la URL de mi favicon y el archivo de mi plantilla HTML, bueno desde ya muchas gracias ^^

    mi mail es intheseaside@gmail.com

    ResponderEliminar
  10. Falta las etiquetas de cierre para que blogger acepte el cógido al final de cada etiqueta ponen (/link) en lugar de () obviamente ponen <>

    ResponderEliminar
  11. hola necesito saber exactamente como va el codigo por que lo he probado varias veces y nada. si me pueden ayudar se lo agradeseria.

    ResponderEliminar
  12. Gracias por la ayuda, al final lo conseguí fijándome en el código fuente de tu blog jeje, ya de paso decir que tienes un blog interesante. ¡Ánimo!

    ResponderEliminar
  13. Gracias por la info, aunque al codigo le faltan los tags de cerrar los links... ;)

    ResponderEliminar
  14. Ya, pues por lo visto ha dejado de funcionar, pq si este blog es ese icono el que debería de tener... ahora le aparece la B naranja de Blogger como a mí. Parece que algo han cambiado para inutilizar esto...

    ResponderEliminar
  15. Ya no funciona, antes tenia mi blog con un favicon pero ahora vuelve a aparecer la B de blogger, ha de ser algo interno del blogger (Aunque Gra Isla siendo un blog de blogger aun la tiene su favicon), si alguien conoce alguna otra solucion seria muy agradecida su colaboracion!!

    ResponderEliminar
  16. Hola Dc,

    Te recomiendo que te pases por este post, donde explico cómo recuperar el favicon en la nueva versión de blogger:

    http://granisla.blogspot.com/2009/03/recuperando-el-favicon-en-blogger.html

    ResponderEliminar
  17. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  18. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  19. Muy buen post, sobre todo para quienes estamos empezando a crear blogs.

    Como dato adicional los iconos (.ico) pueden también ser subidos a google sites y desde ahí ser utilizados con las etiquetas

    < link href='nombre_icono.ico' rel='icon' type='image/vnd.microsoft.icon'/>
    < link href='nombre_icono.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

    ResponderEliminar
  20. Haber tengo una duda.!

    Resulta que agregue el favicon y funciona de maravilla, pero solo en la pagina principal o si se agrega a favoritos y eso! ^^

    Pero si entra a cualquier tema se ve el logo de Blogger alguna idea para que no salga nunca mas ese logo?

    ResponderEliminar
  21. Hola Wuilmer,

    Mírate la información que tengo para la nueva versión de blogger aquí: http://granisla.blogspot.com/2009/03/recuperando-el-favicon-en-blogger.html

    Puede que sea por eso.

    Saludos!

    ResponderEliminar
  22. Gracias , por tu explicacion.
    quisiera pedirte una ayuda , tengo mi blog y desearia ponerle eso que tienes para traducir tu blog. espero tu respuesta, Gracias .

    ResponderEliminar
  23. Esta es la opción que uso yo, en las plantillas nuevas de google (a partir del 2009) siempre funciona. Mi problema es que aun no he elegido un favicon para mi blog, para la gente que este como yo les recomiendo buscar "favicon" en google o ir a un generador de favicon online ya que hay muchos, unos en los que empiezas desde cero y otros que convierten tus propias imágenes a favicon.
    Un saludo, Be DoFollow my friend

    ResponderEliminar
  24. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  25. Gracias por este fantástico post.

    He sudado un poco para eliminar el antigo logo de Blogger despues de todas las operaciones de crear el nuevo favicon, insertarlo en el código y ver que ¡no se cambiaba!

    Todo solucionado.

    ¡Un saludo!

    ResponderEliminar
  26. Awww yo hice todo lo que dices..pero no me anda.. que puedo hacer T___T

    ResponderEliminar
  27. A mi tampoco me funciona, me dice esto:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "link" must be terminated by the matching end-tag "</link"


    ¿que podemos hacer??

    ResponderEliminar

Puedes utilizar algunos códigos HTML, como <b>, <i>, <a>