Bienvenido a VidaBlogger, un sitio dedicado a brindar Ayuda para Blogs.

Vas a poder encontrar trucos blogger, tutoriales y herramientas para blogs, aprenderás estrategias sobre SEO y posicionamiento web, y te daremos los mejores consejos para que lleves tu blog al máximo potencial!





15 ene. 2009

Cambiar el Favicon en Blogger

Hoy les voy a enseñar a cambiar el favicon en blogger. Para aquel que no sabe, el favicon es ese pequeña imagen que aparece en los navegadores al lado de la barra de direcciones. Lo que está marcado en rojo es el favicon:

El hecho de cambiar el favicon es porque le da un toque especial y personal a nuestro blog, ya que por defecto todo blog en blogger trae el favicon de la B en blanco sobre el fondo naranja.

Lo primero que debemos hacer es crear una imagen de 16x16 pixeles de tamaño. El diseño depende de cada blog en particular, lo mismo que los colores e imagenes que le quieran poner.

Una vez que tenemos la imagen 16x16 pixeles que queremos la guardamos. Aqui hay que prestar atención, ya que esa imagen que creamos es un archivo .jpg y lo que necesitamos nosotros para hacer el favicon es un archivo .ico. Para convertir ese .jpg a un .ico vamos a dynamic y clickamos en examinar, elegimos la imagen que creamos y le damos a Create Icon. Esto nos creará el .ico y lo descargamos a nuestra PC.

Ahora ya tenemos nuestro favicon en formato .ico, lo que tenemos que hacer ahora es subir esa imagen a algun hosting de imagenes que soporte los .ico. Yo recomiendo que se creen una cuenta en fileden y ahí van a poder subir su .ico sin problemas.

Una vez que subimos el favicon solo nos queda insertarlo en el blog. Para ello vamos a Diseño y a la Edición HTML del blog y buscamos el siguiente código:

</body>

Y justo antes del mismo pegamos este código:

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

Donde debemos reemplazar http://sitio.com/favicon.ico por la url del favicon que subimos en fileden. Guardamos los cambios y está listo, ya tenemos nuestro propio favicon.

117 comentarios :

  1. hacía un largo rato que estaba buscando como cambiarlo. Después lo pongo en práctica. Gracias !!!

    ResponderEliminar
  2. Pablo:
    Me alegro que te sirva, y gracias por comentar.

    ResponderEliminar
  3. Grande vicarlone!!!! De a poco elnegroentanga se va enchulando de la mano de tus consejos. Muchas gracias!!!!

    PD: Lindo el Mangatar :)

    ResponderEliminar
  4. SKA:
    Me alegra que te sirviera.
    Y gracias a ti por el avatar ;)

    ResponderEliminar
  5. hola, y sabes como cambiarlo aleatoriamente??

    ResponderEliminar
  6. sharysce:
    Creando una imagen .gif en vez de .jpg puedes crear un favicon que cambie. (No se si es eso a lo que te refieres)

    ResponderEliminar
  7. Amigo fijate que cuando le doy guardar a mi plantilla, despues de pegar el codigo de la dir del icono, me aparece Se ha encontrado más de un artilugio con el ID: HTML1. Los ID de artilugio deben ser exclusivos. No se si me podes ayudar con esto.

    ResponderEliminar
  8. Willy:
    Busca el ID HTML1 y ponele otro numero, eso es lo que debes hacer.

    ResponderEliminar
  9. Esta es una buena pagina para crear favicons: http://www.html-kit.com/favicon/

    ResponderEliminar
  10. exekiel:
    Interesante, gracias por compartirla.

    ResponderEliminar
  11. Hola Vicarlone, pasé a avisarte que ya está tu favicon en mi blog y a conocer el tuyo.
    Saludos!

    ResponderEliminar
  12. Gracis por el aporte. en IE aparece cambiado el icono del blogger. pero en Safari no. se puede hacer algo para que lo reconozca.? Gracias (www.capitanphantom.blogspot.com)

    ResponderEliminar
  13. capitanphantom:
    Si creaste el archivo .ico debería de aparecer en todos los navegadores.

    ResponderEliminar
  14. hola. gracias por la explicacion, pero tengo una pregunta, hice todo eso y ya sale mi favicon pero solo en la pagina principal, en las demas url de mi sitio sale el de blogger... como puedo arreglar eso?? ... me escribes porfa... chaespce@gmail.com

    ResponderEliminar
  15. Hola,ya seguí todos los pasos y fijate que mi favicon aparece en la entrada de mi blog y no en la barra de tareas, tu sabes a que se deba? te agradecería mucho que me comentaras, te dejo mi dirección por si quieres ver como sale, www.carlosvalenzuelaenzacta.blogspot.com
    y mi correo es carmarvalbol@hotmail.com muchas gracias por tu ayuda.

    ResponderEliminar
  16. Pues estas colocando el código del favicon en el lugar errado, fijate bien donde lo debes poner.

    ResponderEliminar
  17. Esta ya es la segunda ves que me sacas del apuro ;) enserio muchas gracias!!

    ResponderEliminar
  18. EnriqueGuerrero:
    Me alegra que te sirva.

    Saludos!

    ResponderEliminar
  19. yetobita.series@gmail.com2/2/09 23:47

    che, tengo la imagen, todo, pero nose, no me sale, te dejo la imagen para que si podes descargarla y subirla, hacer el codigo y mandarmelo a mi mail si podes (yetobita.series@gmail.com y el icono es este: http://rapidshare.com/files/193168363/favicon.ico.html ) desde ya muchas gracias, muy piola la web :).

    ResponderEliminar
  20. Llevaba visitados varios blogs en los que decían como cambiar el favicon y hasta que no he leido esta entrada tuya, ninguno me había funcionado. Sinceramente, gracias.

    Flinn Sorrow

    ResponderEliminar
  21. yetobita:
    Ya te envie un email

    Flinn:
    Me alegra que te sea de utilidad. Gracias por comentar y saludos!

    ResponderEliminar
  22. sha puse el favicono en el blog pro kisiera saver si hay alguna manera d hacer q me lo detecte el dominio corto mi pagina es metalword.tk hay alguna forma d q se vea mi favicono en vez d la tk dl dominio?

    se ruega pronta respuesta desde sha muchas gracias =)

    ResponderEliminar
  23. gracias ati lo cambie aunq no es muy bonito pero esa b de blogger n m gustaba

    ResponderEliminar
  24. Me alegro que te sea de ayuda, saludos!

    ResponderEliminar
  25. Muy bueno man, ya cambie el mio chekalo http://temasmarvin.blogspot.com/

    ResponderEliminar
  26. emm..al fin aprendo.luego de tantos intentos. o creo que en los demas blogs no explicaron bien..jeje

    saludos!

    ResponderEliminar
  27. @Yhonny E.
    Me alegra que te sirva.

    Saludos!

    ResponderEliminar
  28. ps.si.me sirvio de mucho..oye me gustaria saber si me podrias ascesorar en algo.es un trabajito con un archivo.que no logro entender el por que de las cosas.si puedes responderme.porfavor.para saber si puedes ayudarme

    ResponderEliminar
  29. Pero que es lo que necesitas saber?

    ResponderEliminar
  30. Es sencillo.solo que ahora no logro tener el discernimiento necesario para ello!. se trata de un theme que he estado trabajando.lo trabajo Ivan de zona cerebral.he estado preguntando en el post, pero no he recibido respuesta alguna. entonces quiero hacer las cosas yo mismo por otro lado.

    La razon por la que ahora no tengo un buen discernimiento hacia blogger,es por que a veces tengo que descargar un archivo y no puedo, por que los virus de la pc no me dejan, cuando es en formato rar, no peudo descomprimirlos yo mismo en la pc, y lo que hago es descomprimirlo en linea en Wobzip.org

    Ahora.te enseñare el theme.para que lo descargues si puedes y entiendas lo que te tratare de dar a entender!

    Theme CompositioVeras que trae sus instrucciones, bueno. ire a el grano. yo ampliamente pude jugar con los codigos, tanto como los de los post, tamaño, estilo, como la sidebar. pero un elemento me hiso una mala jugada, y es el de la sidebar de las tabs, como veraz me refiero a la wdget de tres columnas!

    donde explica ivan de esta manera

    Tabs. Antes de insertar el código HTML relativo al recuadro de pestañas, es necesario que descargues el script contenido en el archivo con el formato RAR disponible en los enlaces de descarga y lo alojes en cualquier servicio de hosting (gratuito o de pago) que te permita enlazarlo y activarlo de forma externa, como Google Pages por ejemplo (recomendado). Hecho esto, en el panel de edición HTML busca el script situado justo encima de la etiqueta </head> y sustituye la dirección url del script por aquella en la que hayas subido el archivo tabs.js. Por ejemplo:

    Ahora, te explico lo que hise,

    descargue el theme en formato rar, luego fui a

    Wobzipy Descomprimi el archivo de el theme en formato rar, y me dio varios codigos, el primero

    era el theme en un documento de texto,que fue el que inserte en blogger en forma copia y pega.hasta tener el efecto de el theme tal cual muestra la demo.

    el segundo en formato Xml, que es como un documento con una imagen blanca, donde puedo insertarlo directamente con examinarlo en blogger.

    el tercer elemento que me dio wobzip fue un archivo de las tabs,fue alli cuando pense, que seguramente es ese a el que se refiere Ivan. lo cierto es que.

    llegue a alojar el archivo en Skydrive, y en rapidshare sin lograr ningun resultado bueno.siempre que iba a editar las tabs en el widget. pasaba era rabia.jeje

    quiese alojar el archivo de las tabs en Filiden.pero me decia que no se podia. entonces mas me senti frustrado.

    me gustaria que me ayudases en ello. quisiera poder por fin aprender a trabajar con esas tabs. que son muy utiles.

    gracias por tu atencion..

    saludos!

    ResponderEliminar
  31. Porque no pruebas alojarlo en Google Pages? o bien en algun hosting gratuito como http://www.000webhost.com/

    ResponderEliminar
  32. google pages sirve?..y como hago eso?... la ultima vez que lo hise. cree como un blog aparte. y no entendi muy bien lo que hacia.hasta que quise hasta borrar eso!...

    y ese servidor es gratito..ese que pasas?

    ResponderEliminar
  33. Google pages sirve, por eso lo recomiendan la mayoria.

    En cuanto a webhost si es totalmente gratuito, yo lo uso en una de mis webs.

    ResponderEliminar
  34. yo trate de entrar en googlepages y me sale error. con algo de page creator. que no entiendo!

    me gustaria saber como es el procedimiento a alojar archivos en esa web que me pasaste

    ResponderEliminar
  35. Hola, yo tengo un problema hace un tiempo, cargo un favicon animado .gif

    el favicon se ve cuando lo muestra en favoritos, pero al abrir la pagina se ve el de blogger, sabes porque o que debo hacer para que se vea bien?...desde ya, mil gracias...

    ResponderEliminar
  36. Para que se vea bien en todos los navegadores lo ideal es que el archivo sea un .ico

    Intenta convertirla como dice ahi.

    ResponderEliminar
  37. si, pero para que sea animado debe ser gif y poner la siguiente linea

    [link rel="icon" href="http://favicon.gif" type="image/gif" /]

    mi problema es que veo el favicon en favoritos, pero no cuando abro la pagina, dejare dos links con las imagenes para que entiendas, besos y gracias

    http://img128.imagevenue.com/img.php?image=63975_Fav_122_699lo.JPG

    http://img268.imagevenue.com/img.php?image=63974_pag_122_342lo.JPG

    ResponderEliminar
  38. La primera de las imagenes que me dejaste no la puedo ver.

    Y sigo sin entender bien. Vos que navegador usas? Porque en internet explorer a menos que sea .ico no se va a ver

    ResponderEliminar
  39. Uso Firefox, es asi el tema, cuando empiezo a tipear la direccion de mi blof, se abre la lista de favoritos para elegirlo y alli aparece mi blog con el favicon a la vista, una vez elegido y abierta la pagina, el favicon que aparece es la B naranja de blogger, yo veo las dos imagenes bien que te envie...me tiene loca esto, porque en algun momento se ve asi que no se porque no siempre...gracias y perdon que sea tan insistente

    ResponderEliminar
  40. Yo tambien veo la B naranja y estoy en firefox.

    Proba subiendo la imagen a otro hosting.

    ResponderEliminar
  41. ok, gracias y perdon tanta molestia, seguire buscando solucion, besitos y exitos

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

    ResponderEliminar
  43. vale maestro

    no se por que me costaba tanto con los otros tutoriales, y con el tuyo lo hice en un minuto

    ResponderEliminar
  44. Amigo! Gracias por el aporte, soy nuevo en esto de los blogs, pero lo pude hacer animado: http://acequilabs.blogspot.com/

    ResponderEliminar
  45. Muchas gracias, funciona perfectamente. Y además son 5 minutos.

    ResponderEliminar
  46. @Sergi
    Me alegra que te funcione. Gracias por comentar, saludos!

    ResponderEliminar
  47. ESTUPENDO HERMANO,, GRACIAS Y ERES BIENVENIDO A MI BLOG.....

    SALU2......

    ResponderEliminar
  48. Excelente! Muchas gracias

    ResponderEliminar
  49. Muchas gracias. Probé mil cosas y no funcionaban. Ahora perfecto

    ResponderEliminar
  50. @ÁĞĞĔĹŐŚ ÁРŐĶÁĹĨРŤĨČŐŚ
    @Kaipress
    @Martín Herzog

    Me alegra que les sea de utilidad. Gracias por comentar, saludos!

    ResponderEliminar
  51. Oie muchas gracias brother, Ya tenia rato buscando como cambiarlo, Y nunca vi bien ese pedaso jaja, Muchas gracias

    ResponderEliminar
  52. @Kanon114
    Me alegra que te sirva, gracias por comentar :)

    ResponderEliminar
  53. Holas, dispulpá, tengo el favicon y todo, y lo puse y todo bien, pero ahora me fijo de nuevo y no me sale en IE, solo en firefox, que debo hacer para que sea vea en IE? porque el tuyo si sale, pero el mio nop :( desde ya muchas gracias. Saludos

    ResponderEliminar
  54. @raulitem
    Asegurate de que transformar tu imagen a .ico, porque de lo contrario no sale en IE

    ResponderEliminar
  55. Pues si que va bien el codig si me a kedado muy bien xD
    Por cierto si hos gusta One Piece mirad mi blog http://yonkouplanet.blogspot.com

    ResponderEliminar
  56. Hola todo me va bien hasta que llego a la publicacion del flavicon en la plantilla, lo coloco donde vos decis y reemplazo, lo de sitio por la url de flavicon y me dice que no se pueden guardar los cambios: 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 value of attribute "href" associated with an element type "null" must not contain the '<' character.


    Gracias espero tu respuesta.
    Un abrazo.

    Oh y te dejo mi correo por si las moscas, ejje virasiro@hotmail.com

    ResponderEliminar
  57. @Afrodita
    Tal como dice el mensaje de error, estas formando mal el codigo, asegurate de copiar textualmente como indico mas arriba y de hacer los cambios sin modificar la estructura dada.

    ResponderEliminar
  58. Gracias por la ayuda!!!

    Aunque, en IE sigue la maldita B de blogger y en Firefox, una hoja en blanco.

    Ya me saldrá (espero)

    Salusos

    :)Reina

    ResponderEliminar
  59. Muchissimas gracias! A la perfección!

    ResponderEliminar
  60. gracias por esto!
    Puede ser que demore un tiempo en aparecer? Me aparece en el lugar del favicon una hojita blanca.

    gracias

    ResponderEliminar
  61. @Max Power
    No, no demora tiempo en aparecer. Asegurate de hacer todos los pasos correctos y que el formato del archivo sea el adecuado.

    ResponderEliminar
  62. Al fin un metodo que funciona, gracias, fue muy sencillo.

    ResponderEliminar
  63. 100000 de Gracias!!! Puse una rica tarta como favicon jejeje http://bressend.blogspot.com/ ^^

    ResponderEliminar
  64. porfin algo que al parecer funciona...
    solo una cosa ahora me aparese el favicon en blanco que abre hecho mal.

    yo creo que es la pagina donde la subi, y no escuentro otras para subirlo.

    Me puedes ayudar subiendo el favicon y me mandas el codigo... a pmayista@hotmail.com


    AMIGO.... graciassss (http://www.html-kit.com/favicon)

    ResponderEliminar
  65. he visto un favicon algo parecido con un radar....muy bonito pero no se poner la .....por fa alguien que me lo ponga.....
    gracias anticipado !

    ResponderEliminar
  66. me gusta tu aporte esta excelente pero tengo problemas no me cambia el favicon no se pq necesito q me ayudes por favor... si podes responderme al maltez83@marlonmaltez.com te lo agradecere...........

    ResponderEliminar
  67. Compa muy buena la info... pero creo que si puedes poner la imagen en formato .png sin problema no solo .ico...

    ResponderEliminar
  68. Buenas noches
    Excelente el post, me ayudo mucho... y ya cambie mi favicon a la primera... eso si tuve que utilizar otra pagina para hostear el .ico

    http://puercaenpuerca.blogspot.com/

    Gracias

    ResponderEliminar
  69. gracias men, estaba desenado quitarlo y gracias a ti lo he conseguido.

    Si eso, visitad mi blog y opinad:

    http://myspace-sims.blogspot.com

    ResponderEliminar
  70. Muy buen tutorial, tambien se podria poner el favicon en cualquier web que tengas alojamiento no? por si esta la quitan no quedarte sin ninguno

    ResponderEliminar
  71. Muchas gracias. me funciona, colocado bajo la línea:
    b:include data='blog' name='all-head-content'/

    ResponderEliminar
  72. gracias lo he probado y funciona

    ResponderEliminar
  73. Muchas gracias amigo!

    Tenía mucho rato de buscar otra forma de volver a colocar mi ícono en el blog, pero el método que utilizaba antes parece que ya no funciona (quizás por cambios en Blogger). Ahora mi blog ha quedado genial como siempre xDD.

    Salu2 desde Honduras!

    ResponderEliminar
  74. Anónimo2/5/10 14:18

    Buen Codigo
    Gracias
    Si Me Funciono

    ResponderEliminar
  75. Me funcionó perfecto!

    Yo usé google sites para hostear la imagen. Así no tengo problemas de que desaparezca.

    ResponderEliminar
  76. Excelente entrada, un 10 y mis felicitaciones, nos vemos (seguramente en ForoBeta)

    ResponderEliminar
  77. Gracias lo prove primero en este blog
    http://our-world-new.blogspot.com/ y me funciono pero despues tuve mas errores en este http://ourworldanime.blogspot.com/ hasta que lei algunas contestaciones de los comentarios y lo consegui finalmente...

    ResponderEliminar
  78. Gracias por la ayuda, yo tenía el problema que cambiaba el icono al inicio de cargar la página pero luego volvía a poner la B con fondo naranja. Gracias.

    ResponderEliminar
  79. Me funciono gracias por la explicacion...saludos

    ResponderEliminar
  80. porfin algo q funsiona :)...esto si es un tutorial

    ResponderEliminar
  81. Yeah Buena explicacion !!! me sirvio este trucos Salu2

    ResponderEliminar
  82. Hay que tener cuidado con el hosting que se usa para el almacenamiento de la imagen, en muchas páginas borran la imagen al X tiempo y te dejan colgado.. Yo recomiendo picassa (desde blogger) o imageshack con cuenta propia.
    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
  83. Exelente manito grax

    ResponderEliminar
  84. Excelente! desde ya te ganas un favorito a tu web! ... solo que yo lo guardé en formato gif porque no encontre servidor pa formato ico fileden cuando entré el antivirus me detectó que había un troyano.. pero me resulto!

    Miralo: www.pophouses.blogspot.com
    Saludos!

    ResponderEliminar
  85. eres un genio me funciono y lo del dominio propio tambien gracias

    ResponderEliminar
  86. Hey, gracias por el post, me ayudo bastante ya que subiendolo como '.ico' si me funciono finalmente, y realmente dentro de 'body' y no de 'head'... de nuevo gracias... Dios te bendiga y guarde. Juan 3:16

    ResponderEliminar
  87. saludos a todos que integran esta comunidad, alguien me podria apoyar yo no encuentro esto del </body ... alguein me podria decir en donde esta y alo busque y no di esta en la parte alta, baja, enemedio o donde gracias por su atencion

    ResponderEliminar
  88. Funciona!!! Muchísimas gracias de verdad...llevaba mucho tiempo intentándolo pero solo gracias a ti lo he conseguido!!

    ResponderEliminar
  89. hola tengo el mismo problema que otra persona que escribio aca.ojala me puedas ayudar. el favicon se ve solo en la pagina de inicio, en las otras paginas dentro de mi mismo blog no se ve el favicon. que debo hacer?? mi mail es l3sli@hotmail.com

    ResponderEliminar
  90. Genial! .. He estado buscando desde hace rato información porque no sabía nada D: .. Muy buen post! Gracias..

    ResponderEliminar
  91. Hola en que tiempo se ven reflejados los cambios del favicon ? inmediatamente ?

    Saludos

    ResponderEliminar
  92. Gracias por la ayuda, a sido un excelente aporte.

    ResponderEliminar
  93. Gracias, buen aporte funcionó perfect.!

    ResponderEliminar
  94. Excelente!!! :D

    Gracias :)

    ResponderEliminar
  95. Muchas gracias, ya esta funcionando !

    Siempre ando moviendo cosas en mi plantilla, y por ende en blogs de ayuda para blogger, pero no me acuerdo haber estado por aqui, en todo caso te agrego al feed. saludos !

    ResponderEliminar
  96. Hola! tengo una duda, yo ya lo cambié una vez, y quiero a volverlo a cambiar, pero ya no me aparece lo de < b ody/>
    Como lo hago ahora? :S
    te agradeceria que me contestaras por correo a dead.666.memories@gmail.com
    Muchas gracias por todo!

    ResponderEliminar
  97. Tienes todo perfecto muchas gracias y por ponerte una pega xD la proxima vez en los links haz ke salgan en otra pestaña porfas esque sino se te sale de esta pero por lo de mas un 10!!. GRACIAS!!

    ResponderEliminar
  98. muy bueno tu pos había probado con barios otros modos pero es el único que me funciono muchas gracias saludos

    ResponderEliminar
  99. Muchas gracias me sirvio de maravilla

    ResponderEliminar
  100. felicitaciones por todos tus mensajes!!! saludos y gracias por refrescarme la memoria!

    ResponderEliminar
  101. Es en el UNICO lugar que me dejó hacerlo, MUCHAS GRACIAS, ME FUNCIONÓ (:

    ResponderEliminar
  102. Gracias me ha ido muy bien, eera lo que buscaba.

    ResponderEliminar
  103. Anónimo28/4/11 2:08

    Muchas gracias por las instrucciones :)

    ResponderEliminar

Lea las reglas:

Todos los comentarios serán leídos y moderados previamente.

Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.

OBS: Los comentarios de los lectores no reflejan las opiniones del blog.