17 jul. 2013

Añade un Favicon en Blogger.

Hay pequeños detalles en nuestra navegación diaria por Internet que solemos pasar por alto y refuerzan la imagen de un sitio web cuando se navega por él. El "favicon":

Esos pequeños iconos  que acompañan a las pestañas de las ventanas en los navegadores (en la imagen superior el icono de GMAIL o Blogger), que identifican un sitio web con una "marca" o "icono descriptivo" que nos permite saber "de un vistazo", sin necesidad de leer el texto descriptivo de la pestaña, en qué página nos encontramos.




 El Favicon proporciona a tu sitio web un indicativo visual muy relacionado con tu "marca" o "sello de identidad".  Su utilización en Internet está totalmente extendida, cualquier sitio que se precie posee esta clase de iconos distintivos.

Por defecto el que Blogger te asigna su propio icono como Favicon, sin embargo es bueno diferenciarse de alguna manera para conseguir tener ese efecto "distintivo" con "personalidad propia".


El proceso creativo


Poner un "Favicon" en tu Blog es muy sencillo, lo divertido es crearlo y pensar en qué imagen o símbolo identifica tus contenidos. Piensa en una imagen, icono o marca que distinga a tu sitio web de los demás. Algo simple, sencillo, conciso y que no de lugar a dudas al usuario de dónde se encuentra tu Blog cuando tiene múltiples ventanas abiertas. Que sirva de referencia al usuario para asociar una imagen sencilla y fácil de recordar a tus contenidos.

Favicon para diarios de la Nube


Características principales
  • Debe representar visualmente tu sitio. 
  • Debe ser sencillo y directo, un Favicon no debe representar "grandes escenas" pues su tamaño no se lo permite.
  • Lo recomendable es hacerlo de unos 16x16 píxeles, aunque puedes llegar perfectamente a los 32x32 píxeles.
  • El tamaño máximo del icono que utilices no debe superar en Blogger los 100KB.
  • Se trata de un archivo que debe tener un formato concreto, su extensión es ".ico", no puedes subir un .png, gif o similar.


¿Cómo creo el favicon?, paso a paso


1) Selecciona la imagen que deseas utilizar para tu Favicon. Créalo con Photoshop, con Paint, con editores de imágenes online o con la aplicación que prefieras:
  • Con el editor que emplees, puedes reducir su tamaño a 16x16 ó 32x32 píxeles (alto y ancho) o directamente pasar al paso 2) (no es obligatorio poner el tamaño con la imagen que previamente hayas seleccionado, hasta que llegues al paso 2).
Con Microsoft Paint integrado en Windows:
1.1 En Paint (editor de imágenes de windows) puedes abrir la imagen que has seleccionado para ser tu Favicon. 
1.2 En windows 7 y 8, en el menú de iconos superior de "Paint" busca la sección o grupo de iconos "Imagen" y luego pulsa en "Cambiar de tamaño", selecciona la opción "Píxeles" y luego introduce las cantidades en ancho y alto puedes activar o desactivar "Mantener relación de aspecto". Si lo haces, Paint al poner por ejemplo 32 te hará 32x24 para no deformar la imagen, no pasa nada porque luego el generador de favicon se encargará de asignarle el valor 32x32 ó 16x16 final.  
En Windows 98 o XP  puedes pulsar el menú "Imagen" y después en "Expandir/contraer" para darle el tamaño de 16 píxeles de alto por 16 de ancho o 32x32. 


1.3 Guarda la imagen en formato .png para tener una buena relación calidad/"peso", hay que conseguir que no supere los 100KB.
Recuerda que este paso puedes saltarlo e ir al paso 2 directamente, lo que sucede es que será la aplicación generadora de favicon la que hará todo el trabajo y es posible que no quede como desees, esto es probar e ir dando los tamaños hasta que se ajuste a las proporciones deseadas.. 

2) Ahora convierte la imagen en favicon. Pasa el .png de 16x16 ó 32x32 o el tamaño que tenga a .ico por medio de una aplicación generadora de "favicon":
  • Conéctate a cualquier web que genera favicon online de las que existen en Internet. En el ejemplo yo utilizo http://www.genfavicon.com/es/ por su facilidad de uso:
2.1) Accede a la página principal. Viene dividida en tres secciones con el paso a realizar para completar tu favicon. El paso (1), cuadro naraja, selecciona el archivo de la imagen que creaste con tu editor de imágenes.
ejemplo con genfavicon.com
2.2) En el paso 2, la sección "verde", define el tamaño de la "previsualización". Es el tamaño que finalmente tendrá tu favicon. Te recomiendo que sea el mismo al que disminuiste la imagen con tu editor de imágenes. Preferentemente 16x16 ó 32x32.
2.3) En la sección "azul" selecciona el enlace "Descargar favicon" y ¡ya lo tienes listo para poner en Blogger!.

3) Pon tu Favicon en Blogger:

3.1) Dentro de Blogger, en el menú izquierdo, accede a la opción "Diseño". Fíjate que en la parte superior izquierda del área de diseño está el "Gadget" para editar el favicon. Lo he marcado con un rectángulo rojo en la imagen inferior.

Edición del Favicon
3.2) Pulsa "Editar" y en la ventana para añadir tu Favicon, pulsa "Seleccionar archivo" para subir el Favicon que te generaste.



¡Ya lo tienes!. Si quieres probarlo, en Chrome te recomiendo que borres la caché del navegador. Ejecútalo también con explorer o Firefox para ver los resultados.



Por Miguel García Sánchez-Colomer.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

30comentarios:

  1. Me has convencido... me voy a poner a ello ;-)

    ResponderEliminar
    Respuestas
    1. ¡Que si hombre!, merece la pena y es divertido. Queda mejor que tener un icono por defecto. Cualquier duda o atasco me dices. Un saludo!.

      Eliminar
    2. si es mejor personalizar ai no me agrada tener las cosas como me la dan me gusta mejorarlas por su puesto la mejor manera es visitando tutoriales paginas blogger ....y hacer consultas

      Eliminar
    3. ¡Gracias Tito!,
      un honor estas palabras viniendo de un programador. Saludos y para cualquier cosa por aquí ando.

      Eliminar
  2. ¡Hola Miguel!, no se si te gusta recibir premios ni si participas en ese tipo de cadenas, pero en mi blog tienes uno esperándote por si te apetece recogerlo. Un abrazo!
    http://bien-me-sabe.blogspot.com.es/2013/07/nuevo-premio.html

    ResponderEliminar
  3. Como siempre genial Miguel!
    He conseguido poner un favicon en mi blog.... Lo que no consigo es hacer de una imagen un favicon, cambio el tamaño en photoshop pero me queda borrosa...
    Bueno, poco a poco.
    Saludos,
    Ana

    ResponderEliminar
    Respuestas
    1. Hola!,
      te puede salir como "difuminado" porque lo haces pequeño pero luego "amplías" su tamaño en el favicon. Fíjate en la guía en el paso 1 para intentar que el favicon "mida" siempre lo mismo, cuando lo diseñes y cuando lo pases por el generador del .ico.

      Ánimo que ya lo tienes!

      Eliminar
  4. Da gusto seguir tus consejos, están tan bien explicados que dan ganas de hacerlo todo, acabo de hacer mi favicon en dos segundos y me ha parecido genial..!!! muchas gracias,y ahora me quedo por aqui, que tengo pendientes muchos temas, y uno es el de mejorar el redimiento del blog, fue por ese tema que te descubrí, muchas gracias Miguel, nos vemos

    ResponderEliminar
    Respuestas
    1. Encantado de que te haya servido. En breve lanzaré una nueva de optimización de rendimiento adaptada a la nueva presentación que ha adoptado PageSpeed, no obstante a excepción de algunos detalles de la presentación, todo sigue siendo igual.

      Espero que lo disfrutes y cualquier cosa me dices... el rendimiento es parte importante del posicionamiento.

      Un saludo y muchas gracias por tu feedback.

      Eliminar
  5. ¡Ay! Miguel lo que vamos a tener que estudiar en septiembre. Besooos http://40ytantas.blogspot.com

    ResponderEliminar
  6. Gracias, por el aporte. Claridad meridiana incluso para los mas torpes de la clase.

    ResponderEliminar
    Respuestas
    1. Gracias a ti Iñaki. Un placer recibir el feedback, ayuda a querer seguir tirando "p'lante" con el Blog. Muchas gracias de nuevo.

      Eliminar
  7. Ha quedado muy bien shur. Un manual rápido. Me gustan las cosas manuales y rápidas. Gracias por el tutorial

    ResponderEliminar
    Respuestas
    1. Gracias Hans. Agradezco tu Feedback, me motiva mucho. Un saludo!.

      Eliminar
  8. Gracias Miguel ya lo he puesto en mi blog, saludos.

    ResponderEliminar
    Respuestas
    1. Gracias a tí!, un placer que te haya funcionado y lo disfrutes. Gracias por tu feedback.

      Eliminar
  9. Hola, he borrado la cache y aunque lo veo en diseño en la vista de blog sigo viendo el favicon de bloger. Dependera de la calidad de la image?

    ResponderEliminar
    Respuestas
    1. En Chrome me pasó lo mismo. Tuve que borrar el .ico que guarda Chrome en el disco duro. Borra la caché y luego busca en el disco duro el .ico (que no sea el tuyo) y borrarlo.

      Verás que en los demás navegadores o los móviles ya se estará viendo bien.

      Un saludo!

      Eliminar
  10. Muchas Gracias! por fin pude ponerle favicón a mi blog, el ícono de blogger me tenía aburrido!! :D

    ResponderEliminar
    Respuestas
    1. Me alegro que te sirviera Kevin, ¡ahora a disfrutarlo a tope!. Un saludo y muchas gracias a ti por participar.

      Eliminar
  11. Miguel, estoy mal pues lo he hecho tal como has dicho y cuando pongo previsualizar y luego descargar, aparece una página en blanco y arriba a la izquierda dice: hola y no hay favicom en ningun sitio :( Qué hago?

    ResponderEliminar
    Respuestas
    1. ¡Hola Patricia!,
      ¿pero subiste el favicon?. Es que en Chrome da problemas con el favicon. Yo tuve que borrar un cirectorio temporal de Windows para Chorme para que se comenzara a visualizar. En Explorer o Mozilla eso no sucede.

      Un saludo,

      Eliminar
    2. Hola Miguel, llego al paso 2.3 pero ahí aparece una página toda blanca y dice Hola en el vértice superior izquierdo y chau, nada mas :O
      Socorro!!!!

      Eliminar
    3. Hola Patricia, ¿te has fijado si te ha descargado el favicon en la zona de descargas de Windows?. Un saudo,

      Eliminar
  12. Gracias por el dato. Estuve como tonta intentando cosas complicadas que no tenían nada que ver con el favicon ¬¬ Ahora ya lo tengo :D

    ResponderEliminar
    Respuestas
    1. Enhorabuena, ahora a disfrutarlo. Cualquier cosa aquí estoy.

      Un saludo!

      Eliminar
  13. Excelente post! Muchas gracias por la ayuda. He seguido cada paso y Eureka!

    ResponderEliminar
    Respuestas
    1. Me alegro mucho Jose, aquí estoy para ayudar. Gracias por tu feedback tan positivo. Un saludo!

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.