¿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.
