Customizando el Favicon de nuestro Sitio
Qué es el Favicon? Bueno en Wikipedia hay una descripción muy buena del término. Pero básicamente es el ícono que muestra nuestro sitio en la barra de navegación de nuestro browser, que es el mismo cuando te agregan a los favoritos del browser. La idea al customizar este ícono y poner uno nuestro es que la gente pueda reconocer tu sitio en los favoritos con solo verlo. Si uno hace un sitio y no agrega ningún ícono te aparece una mini página de internet vacía. Por ejemplo cuando haces un nuevo blog en blogger por default te deja el ícono de la B roja/naranja. En mi caso van a ver un mini monitor. La idea es mostrarte cómo podrías agregar un favicon a tu sitio.
Primero necesitamos una imagen que queremos que sea nuestro ícono. La misma va a tener el tamaño de 16×16 píxels por lo tanto no busques algo muy sofisticado, sino algo simple que identifique tu sitio. Una vez que lo encontraste podes ingresar al siguiente sitio a convertir ese gráfico en un archivo de ícono standard. Si ya tenes el archivo .ico entonces podes saltear este paso.
FavIcon from Pics: Desde acá podemos convertir cualquier imágen en un .ico compatible de 16×16 x 256 colores
Ahí es bastante sencillo lo que debemos hacer, desde el botón “Browse” buscamos la imagen que queremos convertir y luego hacemos click en “Generate FavIcon.ico”. En el siguiente paso nos muestra dos botones, uno con el que podemos bajar la imágen “Download FavIcon” y otro donde podemos ver cómo queda en el Browser antes de bajarlo ya que tal vez no nos guste como quede y elegimos otra imagen (”Test in Browser”).
Cuando bajemos el archivo, éste es un archivo comprimido .zip que contiene el archivo favicon.ico que es el que nos va a servir posteriormente y luego en la carpeta extra viene una imagen .png para que podamos ver cómo quedó, el mismo favicon pero animado para que podamos usar en ciertos lugares como la barra de direcciones del Browser y un archivo de texto con las indicaciones de cómo cargarlo en nuestro sitio.
Ahora ya tenemos el ícono, entonces vamos a ver cómo instalarlo que es lo que dice en el archivo de texto que nos envían. Ahí nos muestran un código HTML, pero dónde y cómo se instala?
Bueno en el caso de un Blog en Blogger debemos ir a Plantilla y luego Editar HTML para poder agregarlo. De mas está decir que hay que subir el archivo a algún hosting que tengas para que pueda ser accedido desde cualquier parte y Blogger eso no te lo permite, pero si lo subis a otro hosting lo podes usar. Ya sea en tu sitio o blog, tenes que buscar dentro del código, el tag <head> y ponerlo justo debajo, seguramente hay algunos tags meta= algo, bueno debajo de esas líneas está bien que lo pongas. El código que tenes que incluir es el siguiente:
<link rel=”shortcut icon” href=”http://www.tu-sitio.com/favicon.ico”> <link rel=”icon” href=”http://www.tu-sitio.com/favicon.ico”>
Deben agregarse ambas líneas para que sea soportado por todos los Browsers. Si queres usar el ícono animado cambia la segunda línea y debería ser algo así:
<link rel=”icon” href=”http://www.tu-sitio.com/animated_favicon.gif” type=”image/gif”>
Si el archivo lo pudiste subir a tu sitio directamente y colocarlo en el raíz del mismo no haría falta poner http://www.tu-sitio.com, sino que directamente el archivo. Espero que te haya servido y a cambiar el favicon de tu sitio!
Email
| 
Imprimir
| 
PDF
De German el 10 Nov, 2007 | Responder
Encontré muy buenas notas!! Esta en particular siempre me había llamado la atencion…sos un genio man…
Abrazo
De Diego Cabai el 10 Nov, 2007 | Responder
Gracias Pocho!! Espero poder seguir escribiendo cosas útiles.
Abrazo