En este post aprenderemos como poner un favicon a nuestro blog de Blogger o página web en general, lo unico que necesitamos es una imagen que convertiremos a favicon con una herramienta online y editar unas líneas del código de la plantilla. Esta entrada ha sido actualizada de la original anteriormente posteada.

Para los que no manejen los términos, un favicon es el icono que aparece al lado de nuestro website (en Firefox siempre visible, en IE aparece cuando es añadido a Favoritos):

Aqui indico como se hace:

Lo primero que debemos elegir es una imagen cuadrada no muy grande (para evitar que se pixelee demasiado), de unos aprox 250 x250 px como máximo, luego de esto usaremos la siguiente herramienta obtenida de Dynamic Drive:

http://tools.dynamicdrive.com/favicon/

Al acceder al enlace anterior, en la parte inferior de la herramienta hacen clic en Examinar, eligen el archivo de imagen que usaran como icono y luego hacen clic en “Create ICON”

COMO CREAR UN ICONO PERSONALIZADO

Aqui les dejaré la imagen que usaremos como icono:

Seguimos los pasos (mencionados arriba), Examinar, Create icon y se nos mostrará una previsualizacion de como se verá nuestro icono. Luego click en “Download Favicon” para descargarlo, con eso lo guardan en su pc y asegúrense que quede guardado con el nombre favicon2.ico (si no pueden ver las extensiones es conveniente que lo habiliten: MI PC> Herramientas> Opcione de Carpeta> Ver> Ocultar las extensiones para tipo de archivo conocido – dejar desmarcado).

Luego que tienen el favicon en su pc lo deben subir a algun hosting que soporte este tipo de archivos, les recomiendo que se creen una cuenta en:

http://pages.google.com/

Para que puedan subir sus archivos (revisar este artículo de GooglePages como almacén gratuito de archivos), sino tambien pueden usar como tripod, 100webspace, etc. Para los que no puedan o sepan subir archivos a Google pages, envieme un mensaje para poder ayudarlos.

Con eso tendrán la url que supondremos sera:

http://www.myweb/favicon.ico

Luego que tenemos el favicon subido a internet solo resta colocar el codigo. Abrimos la Edicion de Plantilla. Luego buscan el tag </head> dentro de la plantilla y copian este codigo:

<link href='http://www.myweb/favicon.ico' rel='shortcut icon'/>

Solo recuerden reemplazar http://www.myweb/favicon.ico por la dirección donde tienen ustedes alojado su favicon (recomendable Google Pages). Y obtendran algo como esto:

Deben tener en cuenta que el nombre del favicon (si es que está subido a GooglePages) debe ser favicon2.ico, sino la imagen que mostrará sera la del favicon.ico por defecto de Google pages que es y debería ser . Vuelvo a recalcar, el código para agregar un favicon a su blog va antes de la etiqueta </head> y es el siguiente:

<link href='http://www.mygooglepage.com/favicon2.ico' rel='shortcut icon'/>

Recuerden cambiar http://www.mygooglepage.com/ por la dirección de su Google page.

Articulos relacionados:
Cómo agregar Bookmarks a tu blog (Blogger)
GooglePages como almacén de archivos

Compartir en Facebook Compartir en Twitter

Comentarios ( 19 ) en: Poner favicon en Blogger
  • DanRH dijo:
    April 13th, 2008 at 2:11 pm

    Gracias, andaba buscando información de ésto.

  • Jony dijo:
    May 15th, 2008 at 5:34 am

    No consigo de ninguna manera ver mi favicon a través de IE.7
    Tán sólo lo veo a través de Firefox.
    No sé que hacer ya
    Saludos..

  • Jony dijo:
    May 15th, 2008 at 5:46 am

    Ya lo Tengo, y mira que me ha costado.
    llevaba muchas horas inténtándolo y por fin…

  • pablo dijo:
    May 28th, 2008 at 7:03 pm

    yo no lo consigo me sigue apareciendo lo de google pages, !ya no se que hacer!

  • KnxDT dijo:
    May 28th, 2008 at 7:31 pm

    Hola pablo, en la url del blog que tienes en tu comentario no aparece ningún favicon ni referencia a él en el header, ni de Google Pages (solo el de Blogger).

    A ver si me explicas mejor cuál es el blog con el que tienes el problema 🙂

  • Valkan dijo:
    July 14th, 2008 at 4:51 pm

    Gracias! intente poner el favicon un monton de veces pero con tu explicacion lo consegui al primer intento… sos un grande!
    Dejo una web con miles de favicons para elegir en caso de falta de imaginacion ^^ http://www.searchicon.net/?g=en-US

  • lourdes dijo:
    July 18th, 2008 at 11:34 pm

    esta muy claro lo que explicas…diria que la mejor explicacion de todas!! aun asi no puedo logralo. no tengo experiencia en html aun asi intento. hay que pegar ese codigo dentro del head? lo pego en el index verdad? perdon estoy empezando en esto..gracias.

  • heber x. dijo:
    August 4th, 2008 at 11:16 pm

    Gracias, en ninguna parte te dicen que en google pages hay que renombrarlo “favicon2.ico”…estuve como loco haciendo que sirviera hasta que encontré tu artículo, gracias…saludos.

  • mina dijo:
    November 7th, 2008 at 3:33 pm

    Pero donde tengo que subir el favicon? si lo hago a traves del blog me dice que no soporta el archivo ico,tengo cuenta en google pero no quiero hacer ninguna página, ya la tengo con blogspot.
    Gracias.

  • Toni dijo:
    April 19th, 2009 at 1:24 am

    :up: Me funcionó!
    busque en la plantilla htlm: control+f:/head
    lo encontré y luego copié antes de ,
    este parrafo:

    (– = tu código de imageshack)
    La imagen la trabaje con gimp, y la guardé en png.
    La subí con imageshack.Copié el código sólo con el parrafo, et voilà!
    Muchas gracias.

  • omar dijo:
    August 31st, 2009 at 4:20 pm

    no se puede cambiar ya no existe pages.google.com ayudenme porfavor

  • omar dijo:
    August 31st, 2009 at 4:20 pm

    ya no existe el google pages

  • Betzabé dijo:
    November 10th, 2009 at 2:30 am

    Awww… gracias!

    Estuve horas buscando cómo hacer esto y en otras páginas confunden demasiado. Te dicen como mil códigos y al final sólo necesitas éste pequeñito. Hay donde te ponen dos renglones de código y te dicen que lo pongas hasta arriba… a mí sólo me funcionó este y qué bueno, porque ya tengo sueño y me estaba desesperando.

    Gracias de nuevo.

  • Mónica dijo:
    January 13th, 2010 at 1:43 pm

    Gracias, estoy creando un blog y aunque ya lo hice para mi web, necesitaba ver si era igual. Una explicación muy clara.
    Saludos…

  • Eduardo dijo:
    March 4th, 2010 at 10:03 am

    Alguien sabe alguna página donde se pueda comprar un espacio para poner el favicon de mi web??

    mandar mail please eddrishh @ hotmail.com

    Gracias !!!

    Estudio Arquitectura RF

  • castiblanco dijo:
    June 20th, 2010 at 8:05 am

    Me sirvió mucho, gracias por colaborar pensé que era más complicado hacer esto.

  • paola dijo:
    September 24th, 2010 at 2:30 pm

    Hola, he hecho todas las indicaciones para tener el favicon en mi blog, llevo todo el día tratado de hacerlo, subi la imagen.ico a iconJ y ellos de dan un link que sirve perfecto, cambié el código, pero no sé que pasa, será posible que me des una mano????

  • Isaac dijo:
    October 2nd, 2010 at 9:48 am

    En los nuevos blog de blogger se puede hacer poniendo otro código distinto a este, es un código que funciona en todas las plantillas creadas a partir del 2009 por blogger y algunas de las anteriores, también hay que cambiar la forma de subir las imágenes, usar imageshack o similar. yo tengo un ejemplo en mi blog ( http://www.ESdoFollow.com ), puedes copiar el código sin problema 😉
    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

  • Alejandra dijo:
    February 21st, 2011 at 3:13 pm

    Hola!
    Estoy intentando cargar el favicon en mi blog de Blogger, pero aún no lo logro. Hay que reemplazar por la url donde esta el favicon? o se pone a continuación?
    Disculpas pero estoy empezando con estas cosas y un poco me mareo.
    Gracias y saludos