Si bien este "Mini Tutorial" no es un Tutorial relacionado directamente con Photoshop, (si así fuese estaría siendo publicado en Photomagazine), está muy relacionado con las imágenes digitales en la web. O por lo menos con los sitios web.
Para aquellos que se preguntan que es ésta palabra que más recuerda a un monstruo de Ultra Seven que a algo relacionado con la tecnología le cuento que un Favicon es una pequeña imagen asociada con una página o sitio web en particular. Esta palabra deriva del inglés favorites icon (icono de favoritos) y también es conocido como icono de página.
Cuando navegamos por nuestros sitios favoritos podemos percibir que en la barra de direcciones y en el encabezado de la pestaña correspondiente se puede ver un icono de 16 px por 16 px, con una imagen representativa del sitio. Igualmente se utilizan para identificar más fácilmente las páginas en nuestras listas de Favoritos, presentándolos junto a sus respectivos títulos, así como también en los historiales de páginas visitadas y de navegación reciente.
En el caso de los sitios tradicionales, las comunes páginas HTML, podíamos definir el Favicon simplemente poniendo un archivo llamado favicon.ico en el directorio raíz del servidor web, el cual era mostrado automáticamente en los favoritos de Internet Explorer. Posteriormente se creó un sistema basado en HTML para indicar la localización de un icono para cada página.
Basado en este proceso les dejo el siguiente truco para poder eliminar la “molesta” B blanca recuadrada con naranja de Blogger y poner nuestra propia imagen. Lo primero que debemos hacer es crear una imagen de 16 px por 16 px y grabarla con el formato ICO, aunque existen varios navegadores que también soportan los formatos de imagen animada GIF y PNG.
Para hacerlo podemos utilizar el programa Irfan View que permite convertir cualquier imagen cuadrada en formato ICO. Recordemos guardarla con el nombre favicon.ico.
Luego debemos subir nuestra imagen a cualquier sitio que nos permita una galería Online, o bien subirla directamente a nuestro Server si contamos con algún sistema de Hosting personalizado. Hecho esto debemos copiar la ruta completa de la ubicación de nuestra imagen de 16 px por 16 px y abrimos nuestro blog en Blogger.
Vamos a la opción Personalizar > Diseño > Edición de HTML.
Buscamos la etiqueta y copiamos el código que se encuentra a continuación, reemplazando la parte que dice 'http://www.url.com/favicon.ico' con la dirección que hemos copiado de nuestra imagen favicon.ico.
Código
link href='http://www.url.com/favicon.ico' rel='shortcut icon'
Antes de la palabra link deberemos ingresar el signo <. Al finalizar deberemos cerrar la sentencia con el símbolo / seguido del signo >.
Si bien se hará referencia al Favicon que hemos subido, puede ocurrir que los mismos desaparezcan si se borra la cache del navegador.
No hay comentarios:
Publicar un comentario