Aumenta la visibilidad de tu blog con un favicon. El 'how to' paso a paso

¿Ya te fijaste en el nuevo ícono que tiene mi blog?:


Bueno, pues ese es un favicon que generé muy fácilmente. Si quieres hacer algo similar para el tuyo te invito a seguir leyendo este post.

El favicon (favorite icon) es una imagen de 16x16 ó 32x32 pixels que acompaña a la dirección Web de una página (como por ejemplo un blog) en un navegador de Internet. También antecede el nombre de la misma en la lista de favoritos y en las pestañas o tabs de aquellos navegadores que lo permiten (la gran mayoría). El favicon no sólo distingue y caracteriza de manera exclusiva a la página Web, sino que aumenta la visibilidad de la misma, la promociona mejor.

Googleando he encontrado bastante información sobre los favicons y sin mucho trabajo me hice de uno para mi blog, alojado en Blogger (por eso tenía el favicon de Blogger por omisión).

¿Cómo lo logré? Los pasos generales son los siguientes:

1.- Seleccionar una imagen.
2.- Generar un favicon de la imagen.
3.- Si generado online, descargarlo y guardarlo localmente.
4.- Alojar el favicon en un servidor de Internet.
5.- Actualizar el código HTML del blog, correspondientemente.
6.- Comprobar.

Y aquí los detalles:

1.- La imagen.

Lo primero que debemos tener es la imagen que se quiere usar como ícono. Por ejemplo, yo escogí la "D" de "Desarraigos" del título de este blog y la retoqué un poquito con el programa Photoshop. Puede tratarse de cualquier otra imagen, de un logo, de una foto, de lo que Ud. quiera. Se aconseja que sea cuadrada (igual de largo que de ancho) pero no necesariamente pequeña (de 16x16 ó 32x32 pixels). Puede ser mayor. Además, en Internet hay muchísimos bancos de imágenes gratis listas para descargar.

2.- Generar el favicon.

Online hay también muchos sitios Web a través de los cuales se puede generar un favicon del tamaño adecuado a partir de una imagen. Una lista de 20 ellos se puede encontrar en CSS Juice.

Yo usé el generador de IconJ.com. No hace falta registrarse para usarlo. Las imágenes deben tener extensión .GIF, .PNG, .JPG, .BMP, .ICO ó .TIFF y no deben ser mayores que 1MB. Ellos tienen, además, más de 18 mil favicons listos para usar, ordenados por categorías y alfabéticamente. Cuando cargas la página de IconJ.com, tienes esta opción a la derecha, arriba (también Icon Generator en el menú horizontal superior):


Busca la imagen que quieres convertir, selecciona el nivel de definición y da click en Upload Now. En un par de segundos ya estará generado el favicon.

3.- Descargar el favicon.

Lo más común en los generadores de favicons es que descargues el tuyo una vez generado. En casi todos los casos de trata de que guardes, en un subdirectorio local en tu computadora, el archivo con extensión .ICO que se acaba de generar.

4.- Alojar el favicon en un servidor de Internet.

Si tienes un dominio propio de Internet y espacio de memoria disponible en un servidor, copia allí el favicon que acabas de descargar. Yo tengo alojado mi blog en Blogger pero también soy propietaria del dominio www.desarraigos.com, en el cual también tengo espacio de memoria a mi disposición. Allí pude guardar mi favicon pues Blogger no tiene una opción para ello.

Con IconJ.com, sin embargo, también tienes la posibilidad de alojar el favicon generado con ellos mismos, es decir, en sus servidores. Así hice yo finalmente (fíjate que en el siguiente ejemplo usé la foto de mi perfil):


La última variante corresponde a un enlace directo al favicon que IconJ.com generó y alojó en sus servidores. Allí está el código HTML que debes incluir en tu blog. ¡Qué generosos, hasta lo dan masticado! Copia ese código (marcar + copiar).

5.- Editar el código HTML del blog.

Si tienes tu blog alojado en Blogger, como yo, ve a la opción de Diseño y allí a la opción de Edición de HTML. Ojo: por razones de seguridad, antes de alterar el código de su plantilla haz una copia del mismo. Si metes la pata al menos puedes regresar después a la versión anterior. No te asustes, lo que hay que cambiar es una bobería pero nunca está de más tomar precauciones.


En la ventana de edición busca el fragmento del código donde concluyen las declaraciones del encabezamiento del blog:


En la siguiente imagen hago un zoom para que veas bien a qué fragmento me refiero:


Justo donde está marcado en verde debes agregar (pegar) el código de IconJ.com que copiaste previamente, en otras palabras, el enlace (link) que redirecciona al lugar donde se encuentra el favicon generado y almacenado en los servidores de IconJ.com. Quedaría algo así:


Pero, el código que has copiado incluye una sola línea. Añade la otra tal y como muestro en el ejemplo en el recuadro verde (da click en la imagen para ampliarla). Ambas se diferencian solamente en una palabra, shorcut. El nombre de tu favicon es lo que aparecerá en lo subrayado en rojo.

Ya, eso es todo. No te olvides de guardar los cambios realizados:



6.- Paso final: comprueba a ver.

Tu blog tendrá a partir de ahora un nuevo favicon, distinto del de Blogger, que aumentará su visibilidad. Ve y compruébalo. Si todavía no ha cambiado, da refresh en el explorador.

No es tan difícil, ¿verdad?

[Update:] Si te fijas bien, el favicon mío tiene las puntas blancas y no transparentes (la "D" no está solita sino que está sobre un cuadrado blanco que se ve cuando el fondo es gris, por ejemplo). Eso puede mejorarse: IconJ.com dice que para ello es necesario cargar una imagen de tipo .GIF o .PNG con fondo transparente.

Share |