18 abr. 2011

¿Cómo personalizar el icono del blog (Favicon)?



Si te fijas, cuando visitamos una web o un blog verás que en la pestaña de navegador aparece un icono que identifica el sitio. Dicho icono es lo que se llama Favicon. Lo que haremos es sustituir el Favicon de blogger por un icono propio para nuestro blog a partir de una imagen jpg, gif o png.
El favicon es un archivo gráfico con extensión .ico y normalmente de tamaño 16x16 pixeles. Precisamente en esto radica la "complejidad", ya que es un formato poco habitual. De lo que normalmente disponemos son de archivos jpg, gif o png pero no un archivo .ico.

Paso 1. Generar el archivo favicon.ico a partir de una imagen
  • Conecta con el servicio GenFaicon
  • Selecciona la imagen de partida (jpg, gif, png) y presiona Upload.
  • Indica el tamaño. 16x16 y presiona Capturar y previsualizar, fíjate que puedes mover la zona a capturar de tu imagen original.
  • Una vez lo tengas, presiona Descargar el favicon, guárdalo en un lugar que luego sea fácil encontrarlo. Debe llamarse favicon.ico

Procedimiento actualizado el 08/06/2011

Paso 2. Personalizar el favicon del blog
  • Debes entrar a blogger pero a través de esta dirección http://draft.blogger.com (versión más avanzada de blogger)
  • Abre la pestaña "Diseño" y luego "Elementos de la página"
  • En la parte superior izquierda verás una zona llamada "Favicon" (nueva opción de blogger publicada el 8 de Junio de 2011)
Nueva funcionalidad para cambiar el Favicon en Elementos de la Página de Blogger
  • Pulsa "Editar". Se abre una nueva ventana donde tienes un botón para "Examinar"
  • Busca el icono generado en la paso 1 y pulsa "Abrir" y posteriormente "Guardar"
  • Guarda la plantilla y visualiza el blog.
Nota: Si vez que no se muestra tu nuevo icono, usa la opción de eliminar de tu navegador el caché, cookies y demás y vuelve a visualizar el blog. El nuevo icono se localizará automáticamente en el raiz de la dirección del blog, ejemplo www.iniciablog.com/favicon.ico

Con este nuevo procedimiento ya no es necesario publicar el favicon en un hosting ni personalizar el código de la plantilla. Queda también resuelto el problema de incompatibilidad que se presentaba con Internet Explorer 9 donde no se veía el favicon personalizado de blogger y que fue reportado por uno de nuestros seguidores. Si quieres ver el método utilizado anteriormente haz clic aquí (PDF)

Como en cada entrada, te invito a usar los comentarios para dejar tu opinión, además si te ha gustado, una forma de ayudar a que iniciaBlog lo conozca más gente es haciendo clic en los botones de Twitter y Facebook. ¡Gracias!


48 comentarios:

  1. Anónimo8/5/11 1:23

    no funciona.
    En Internet explorer sale el mismo de Blogger porque el favico se encuentra en el directorio raiz. Alguien saber como cambiarlo?

    ResponderEliminar
  2. Si no te funciona es posible que el navegador tenga en caché el icono antiguo. Elimina el caché del navegador desde el menú herramientas y debe verlo. Si ves que sigue sin funcionar envíame un enlace hasta tu blog para verificarlo.

    Seguimos en contacto.

    ResponderEliminar
  3. Anónimo9/5/11 11:33

    Hola, segui todos tus pasos, muy bien explicados por cierto, y...tachán!! Funciona!
    Muchas grácias y enhorabuena por tú blog.
    No te perderé de vista ;)

    ResponderEliminar
  4. Gracias por tu comentario y por seguirme, si quieres déjame tu dirección del blog y puedo recomendarte algunas entradas de iniciaBlog para que las puedas poner en práctica o bien consulta todo el índice de los temas ya publicados. :D

    ResponderEliminar
  5. Ah si? grácias muy amable.Mi blog es lanimuu.blogspot.com, tengo muy poco contenido todavía jeje.

    ResponderEliminar
  6. Hola, mi favicon siempre se ha visualizado, pero hace varios dias, que fue que me percate, no se visualiza. He investigado en la red y parece que hay algun tema de incompatibilidad entre blogger y IE9. Lo cierto es que he realizado todos los cambios que recomiendan y nada, sigue saliendo el dichoso favicon de blogger. Sabes algo al respecto? He abierto muchos blog, y en unos se muestran y en otros no, como el tuyo que tampoco se visualiza en mi IE9. En otros navegadores OK. Muchas gracias.

    ResponderEliminar
  7. Hola Daycareweb,

    Llevas toda la razón. La pista de lo que está pasando con blogger e internet explorer 9 puedes verla por aquí.

    http://answers.microsoft.com/es-es/ie/forum/ie9-windows_7/no-se-visualizan-los-favicon-en-blogger-desde-ayer/53461044-d5ca-4233-8459-cae6e57aa643

    Ya te comentaré algo más concreto y si es necesario actualizaremos este post.

    Saludos y gracias por tu comentario

    ResponderEliminar
  8. Muchas gracias por tu pronta respuesta, ese post ya me lo he leido varias veces pensando que yo no lo hacia bien, pero no, lo he hecho varias veces, todo, y nada. Tu favicon tampoco sale, como te dije. Saludos

    ResponderEliminar
  9. Efectivamente se ve que es un problema reciente. Todo apunta a incombatibilidad del ie9 con blogger...he visto ya varios foros pero no hay repuesta oficial. Confirmarte que con ie8 va bien.

    Déjame indagar un poco y te informo.

    Gracias.

    ResponderEliminar
  10. Correcto, con el IE8 va bien.
    Gracias.

    ResponderEliminar
  11. Hola Daycareweb.

    Comentarte que Google acaba de sacar una nueva funcionalidad mediante la cual ahora es posible personalizar directamente el icono sin necesidad de tener que usar un servicio extra para alojarlo.

    Ve a Diseño-->Elementos de la página y vas a ver un nuevo elemento en el diseño llamado Favicon. Haz clic para publicar un icono personalizado. Una vez lo tengas borra cache y dale un tiempo veras el nuevo icono incluso en internet explorer 9. Comentame....

    ResponderEliminar
  12. Acabo de actualizar esta entrada con el nuevo procedimiento para personalizar el favicon del blog. Además lo he probado con Internet Explorer 9 de manera satisfactoria.

    ResponderEliminar
  13. Gracias por tu empeño.
    En mi blogger no aparece esa nueva funcionalidad, te confirmo que la he buscado, incluso en otras pestañas, pero no la tengo. No se porque.

    Saludos.

    ResponderEliminar
  14. Debes entrar a blogger a través de esta dirección http://draft.blogger.com es una versión más avanzada donde incorpora funcionalidad que con el tiempo llega a la versión "normal"

    ResponderEliminar
  15. Muchas gracias, finalmente funcionó.
    Intuyo, que los codigos anteriores ya no son necesarios, cierto?

    Saludos y muchas gracias.

    ResponderEliminar
  16. Efectivamente. En principio he quitado del head lo anterior y me funciona y como habrás podido leer he cambiado todo le procedimiento con respecto a lo que había antes. Si quiere consultar el procedimiento anterior tienes un enlace a un archivo PDF.

    Perfecto! Dayvareweb. Gracias

    ResponderEliminar
  17. Hola, lo que te cuento es de pelicula.
    En casa tengo 2 PC, los dos con IE9.
    En uno funcionó como te dije y en el otro no. Parece que mi IE9 esta tonteando. Incluso tampoco veo el icono tuyo. En el otro OK.
    Ya he borrado cache y reeiniciado, 2 veces, pero nada.
    Saludos

    ResponderEliminar
  18. Gracias, menos mal, antes habia que tocar el código para poder cambiar el favicon.

    ResponderEliminar
  19. Anónimo25/6/11 0:14

    muchas gracias me a servido mucho :)
    mi blog:http://www.southparklatino.com.mx/

    ResponderEliminar
  20. Gracias David,
    Me gusta tu blog y he visto el nuevo icono....
    Seguimos en contacto

    ResponderEliminar
  21. Hola, mira yo tuve un error y era que me salia que el archivo era invalido y era .ico pero se me habia olvidado que habia modificado el html para que apareciera

    href='http://www.fileden.com/files/2010/5/14/2859210/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

    solo elimine el codigo de mi plantilla y pude poner directamente desde blogger, espero que alguien que le pase lo mismo le sirva esta solucion

    ResponderEliminar
  22. Gracias Fabix es sumamente interesante tu aporte...gracias por dejar tu comentario seguro que resultará muy muy útil..

    Disculpa no haberte respondido antes pero se me había pasado tu comentario.

    Gracias, Jesús.

    ResponderEliminar
  23. Efectivamente Merovingio, antes habia que modificar la plantilla y además buscarte la vida para hostear el icono, parece mentira como algo "tan sencillo" no estuviese de antes...pero bueno.

    Gracias por tu comentario.

    ResponderEliminar
  24. Hola Jesús, éxito en este Año que Inicia. Tengo un problemilla y no es precisamente con el icono del favicon si no con la dirección (URL) de mi blog esta no aparece cuando lo agrego a mi favoritos.

    Ni tampoco aparece en la pestaña que despliega o abre firefox y IE. Solo aparece el icono del favicon con un punto al lado. Me podrías echarme una mano, esta es la dirección del blog (cursodecadd2d.blosgpot.com) saludos.

    Nota: Esto solo ocurre cuando intento agregar a favorito la página de inicio del blog.

    ResponderEliminar
  25. Hola Robert,

    He podido conectar con tu blog y lo primero es tratar de solucionar el tema del nombre del blog ya que aparece un punto.

    Para ello ve a la pestaña Configuracion-->Básico y donde pone título pulsa Editar para ponerlo.

    Avísame nuevamente cuando lo tengas para mirar el resto!

    Gracias y feliz 2012 para ti también!
    Jesús González

    ResponderEliminar
  26. Listo Jesús solucionado el problema por fin mil gracias saludos.

    ResponderEliminar
  27. Emmanuel Acevedo31/1/12 22:51

    yo le puse uno pero quiero reemplazarlo... ya borre los cokies y no me sale que puedo hacer???

    ResponderEliminar
  28. disculpen mi ignorancia pero recién estoy intentando aprender este tema de los blogs y aún no sé por mucho q he buscado información.....q es un favicon y para q sirve????

    ResponderEliminar
    Respuestas
    1. Jeje..Pepa...se trata del iconito que adquiere la pestaña dentro del navegador web. Por defecto tienes el icono naranja típico de blogger, pero éste puede personalizarse tal y como se describe en este post.

      Un saludo..ah! y gracias por este comentario
      Jesús González.

      Eliminar
  29. Hola Jesus.

    He probado lo que me dices. tengo un icono de 16X16 con formato .ico, desde http://www.iconfinder.com/icondetails/64759/16/. El tema es que no puedo lograr que se vea en Internet Explorer. Me gustaría que observaras mi blog:
    http://mbexcel.blogspot.com/

    Solo he logrado que se vea el nuevo favicon en la opción de favoritos.

    Gracias por tu ayuda

    ResponderEliminar
    Respuestas
    1. Hola Mauricio,
      Lo veo perfectamente lo he probado con Chrome, Firefox y con Internet Explorer y en los tres casos visualizo el Favicon sin problemas. Si ves que siges con el problema elimina las cookies y los archivos temporales del navegador y vuelve a probar.

      Aprovecho para felicitarte por tu blog, me ha parecido de los más interesante.
      Ya me dices algo ¿vale?

      Un abrazo,
      Jesús González

      Eliminar
    2. Gracias Jesus por tu comentario. En cuanto al tema en cuestión, me gustaría que me indicaras como eliminar las cookies y los archivos temporales.

      No se si entiendo lo que me propones con respecto Google Docs.

      Me imagino que se trata de como "colgar" las hojas de cálculo para permitir descargas?. Si tienes algo acerca de este tema me gustaría que me asesoraras.

      Muchas gracias por tu pronta respuesta, y como es debido, a partir de hoy soy un nuevo seguidor de tu sitio.

      Eliminar
    3. Hola Mauricio,
      Si usas Internet Explorer ve al menú Herramientas y luego en la pestaña General tienes un botón de Eliminar el historial. Cuando lo presiones puedes eliminar todo, incluido las cookies y archivos temporales.

      Con respecto a Google Docs, considero que es la opción en la nube "en internet" más interesante que existe. Aunque la funcionalidad de la hoja de cálculo de microsoft es infinitamente superior, esta otra, la de Google resuelve muy bien una hoja de calculo con edición y almacenamiento en Internet. Te lo dije fundamentalmente para despertarte la curiosidad en este aspectos y dedicaras un análisis a esta hoja.

      Te espero!

      Eliminar
  30. Jesus. Gracias por tu ayuda, me ha sido de gran utilidad.::

    ResponderEliminar
    Respuestas
    1. Perfecto, entiendo que has visto el icono verdad?.

      Eliminar
  31. Hola Jesus, efectivamente ya se ve mi favicon....

    Gracias....

    ResponderEliminar
  32. Genio de la vida♥ lo logrè.
    Estuve a punto de escribir diciendo qe no salia.
    Mi problema fue qe borraba el cache i los cookies pero no el resto del historial..
    Pero ya lo hice y enseguida quedò.. :D

    Muchas gracias por los pasos excelentemente explicados :)
    Un abraso.

    ResponderEliminar
    Respuestas
    1. Hola Rooh,

      Efectivamente el caché del navegador puede jugar malas pasadas....perfecto!...gracias por comentar, he visto tu blog y tu flamante favicon ¡felicidades!

      Un abrazo,
      Jesús González

      Eliminar
  33. muchas gracias, me has ayudado.

    Saludos.

    ResponderEliminar
    Respuestas
    1. Gracias a ti....Mucha suerte con tu blog
      Jesús González

      Eliminar
  34. Hola Jesus,
    No se que me pasa al crear mi favicon.
    Subo la imagen en .jpg y después hago los pasos siguientes. Pero el favicon que se me crea no se entiende nada, las letras están totalmente deformadas y pixeladas.
    ¿Que me pasa?
    Gracias,

    María

    ResponderEliminar
    Respuestas
    1. Me parece que es muy grande la imagen...trata de recortarla, con el servicio que te propongo puedes hacerlo. Coméntame si lo logras, en caso contrario te propongo otras variantes.

      Muchas gracias por acercarte hasta iniciablog.com
      Jesús González

      Eliminar
    2. Ya lo he conseguido.
      muchas gracias!

      María

      Eliminar
  35. Hola, estoy presentando el mismo problema con el favicon. En el diseno sale bien, pero en la direccion http:// no hay manera!
    Mi direccion: www.lidislamoru.com
    Gracias

    ResponderEliminar
  36. he intentado de todo, hice restar a misafari, elimine cache'. cokies y nada. No puedo colocar mi icono en la url. Y estoy pagando dominio personalizado

    ResponderEliminar

Te agradezco la participación en iniciaBlog a través tu comentario. Recuerda que te responderé con otro comentario justo debajo del tuyo. Gracias y mucha suerte! ;-)

Más información ¿Cómo poner el botón de...:?

Premio Bitácoras

Aviso Legal

Licencia Creative Commons
iniciaBlog - Te ayuda con Blogger a mejorar tu blog
iniciaBlog se encuentra bajo una Licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
Basada en una obra en www.iniciablog.com.

Creado por Jesús González

Política de Privacidad de iniciaBlog | Política de Cookies
2015 © Jesús González es el autor de iniciaBlog.com
Tema creado por Way2themes y adaptado por inciciablog