By Abhiroop Basu/ Aug 27, 2010Updated Dec 24, 2012/ WebAunque

WordPress es una de las plataformas de blogs más eficaces, siempre he sido un fan de Blogger de Google.

Después de crear mi sitio individual de blogs de tecnología, TechComet, en Blog writer, comprendí que a mi blog le faltaba un toque profesional ya que su favicon estaba configurado con el logotipo predeterminado de Blog writer: la “B” blanca y naranja.

Si quieres crear una marca para tu blog, es vital que cambies el icono por defecto por una creación propia que se ajuste a la temática de tu sitio web.

En este artículo voy a resumir las acciones para crear y cambiar el favicon de Blogger.

Ten en cuenta: Los pasos descritos se adaptan a los usuarios de Blogger, sin embargo, los pasos generales en el desarrollo de un favicon puede utilizar a cualquier sitio web o blog.

Uso de un Favicon

Un favicon es un icono de 16 × 16 que aparece en la barra de título de los navegadores de Internet o en la barra de direcciones. Los navegadores de Internet que soportan la navegación por pestañas también muestran el favicon en cada pestaña específica.

Como muestra la captura de pantalla, un favicon puede ayudar a tu blog a distinguirse en un navegador congestionado, ya que son excelentes indicaciones visuales.

Crear un nuevo favicon

El primer paso es crear tu propio favicon.

Los favicons se crean normalmente utilizando el formato .ico, pero también puedes desarrollar el favicon utilizando los formatos GIF o PNG.

Si no te sientes especialmente imaginativo, puedes buscar en la web cualquier imagen que desees mostrar como tu favicon y reducirla a un tamaño de 16 × 16 y esperar como un archivo .ico, .png o .gif. También hay una variedad de galerías de favicones donde puedes descargar favicones ya hechos que se mantienen en el tamaño y formato requeridos.

Sin embargo, si vas a crear una marca para tu blog, tiene sentido que el favicon coincida con el estilo de tu blog. Por ejemplo, yo tengo un estilo marrón oscuro para el sitio de mi blog:

Y decidí que lo más apropiado sería crear un favicon que coincidiera con la combinación de letras y colores.

Lo más probable es que Photoshop sea la mejor aplicación para desarrollar tu favicon. Sólo tienes que tener en cuenta que debes dibujar tu imagen en un lienzo de 16 × 16 y guardarla como un archivo .gif o .png.

Si no tienes Photoshop, hay una serie de “generadores de favicon” como éste, donde puedes producir y editar una imagen en un lienzo de 16 × 16.

Cómo publicar tu favicon

Blog writer no ofrece servicios de alojamiento, pero cualquier imagen que adjuntes a un post se guarda instantáneamente en tu cuenta de Picasa.

Por lo tanto, todo lo que necesitas hacer es crear un post en blanco y adjuntar tu favicon a él. A continuación, visualiza la versión HTML de tu artículo haciendo clic en“Editar HTML”.

La ubicación de mi favicon está en“http://2.bp.blogspot.com/_MZZJ1m2SoG0/TG-IyPj4ZZI/AAAAAAAAAF0/bC0IZk9S3a8/s1600/logo-(16 × 16). png“. Anota el enlace donde se encuentra tu favicon.

Si utilizas otro servicio de envío de imágenes como ImageShack, asegúrate de anotar el enlace directo a la imagen (es decir, un enlace que termine en.ico,. png o.gif y no en. html). Por ejemplo, el enlace de ImageShack para mi favicon está en“http://img175.imageshack.us/img175/8924/logo16x16.png“.

Cambiar el favicon por defecto del blogger

Una vez que hayas creado y subido un favicon con el que estés satisfecho, abre tu panel de control de Blogger y elige“Diseño“.

A continuación, en la ventana principal de Blogger elige“Modificar HTML“.

Esto abrirá el editor de plantillas de diseño HTML. Aquí examina“Expandir plantillas de widgets” para asegurarte de que todo el código HTML de tu sitio web es visible.

A continuación, desplázate hacia abajo y pega lo siguiente ANTES de la etiqueta “”:

< 
Revitaliza tu blog y el nuevo favicon debería ser visible.
Observaciones (12 )
  1. Renata Sep 19, 2010 en 8:07 am ¡Muchas gracias! Había probado otros numerosos tutoriales y estaba completamente frustrada debido a que NUNCA pude hacerlo funcionar. Esta vez … SORPRESA … FUNCIONÓ COMPLETAMENTE! No puedo agradecerles lo suficiente! Estoy preparando una transformación total de mi blog y voy a utilizar mi nuevo diseño de logotipo que he creado para esta función, gracias a su tutorial! abhiroopb Sep 19, 2010 at 8:51 am ¡Me alegro de que lo hayas encontrado útil!
  2. Renata Sep 19, 2010 at 8:30 am ¡Yo también! No pude resistirme a esperar el cambio de imagen del sitio del blog. Ya he modificado mi favicon. Si desea inspeccionar a cabo: http://testadoprovadoeaprovado.blogspot.com/I va a publicar sobre él y el enlace a su página. Gracias de nuevo! abhiroopb Sep 19, 2010 at 8:51 am Lamentablemente, no entiendo el portugués (creo que es portugués) sin embargo el favicon se ve excelente! Renata Sep 19, 2010 at 10:14 am Sí, es portugués (Brasil). Utilicé Open Workplace draw, líneas muy básicas … He publicado en Inglés sobre el Favicon. He probado con Chrome, Safari e IE, lamentablemente no funciona en IE. ¿Algún consejo? abhiroopb Sep 19, 2010 en 10:41 am ¿Has probado con IE9 (Beta)? Si no, no estoy seguro, lamentablemente:(Renata Sep 19, 2010 en 10:53 am Realmente, nunca utilizo IE, así que nunca lo actualizo. El mío es IE8.0 Damien Oh Sep 20, 2010 at 8:29 am ¿Puedo preguntar, qué usaste para producir tu favicon? Para tu información, la mayoría de los favicon que terminan con la extensión.ico no están realmente en formato favicon. Son sólo archivos de imagen básicos (png, jpg o gif) renombrados como ico. IE no puede reconocer el archivo de imagen como favicon. Debes asegurarte de que tu favicon es realmente del formato ico para que IE lo reconozca. GIMP es un gran software que utilizo para producir favicon. Simplemente guarda el archivo de imagen como “Icono de Microsoft Windows”. Renata Sep 23, 2010 at 2:55 pm Muchas gracias, lo intentaré. Tengo Gimp! Ya te diré si funciona!
  3. no entiendo … Dec 18, 2010 at 6:26 am Sólo funciona en firefox, google chrome y opera. no funciona en internet explorer … no sé cómo … abhiroopb Dec 18, 2010 at 6:33 am El comentario de Damien que aparece a continuación detalla lo que hay que hacer si deseas que tu favicon sea visible en IE “¿Puedo preguntar, qué usaste para crear tu favicon? Para sus detalles, muchos favicon que terminan con la extensión.ico no están realmente en formato favicon. Son simplemente archivos de imagen básicos (png, jpg o gif) renombrados como ico. IE no puede reconocer el archivo de imagen como favicon. Tienes que asegurarte de que tu favicon tiene realmente el formato ico para que IE lo reconozca. GIMP es una buena aplicación de software que utilizo para generar favicon. Simplemente conserva el archivo de imagen como “Icono de Microsoft Windows””.
  4. Anji Sep 28, 2011 at 9:00 am ¡Gracias! Funcionó perfectamente!