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.