En múchos blogs y páginas aparece un iconito al lado de la url en la barra de direcciones del ordenador. Este icono se denomina FavIcon y es muy sencillo tanto de crear como de colocar. En este artículo se explica de forma detallada todos los pasos que debes seguir para colocar un favicon en tu blog o página web. Además, se incluye también un apartado en el que se explican las modificación si queremos tener un FavIcon animado (un gif animado)
1- Creación del icono para nuestro blog/web
Un FavIcon no es más que una imagen de 16x16 y con extensión ".ico". Por tanto, si dominamos cualquier herramienta para el manejo de imágenes la podemos crear de manera sencilla a partir de cualquier imagen. Pero, ¿y si no dominamos ninguna herramienta de manejo de imágines? Hay páginas web que, a partir de cualquier imagen son capaces de crearte automáticamente tu fichero FavIcon, así que podemos utilizarla sin ningún problema. Por ej, el icono de este blog ha sido creado automáticamente en la siguiente página web: http://www.htmlkit.com/services/favicon/
Una vez creado el icono es necesario subirlo a internet, bien a nuestro propio servidor o, si no poseemos, a un servidor gratuito. Hay muchos servidores gratuitos que no permiten subir ficheros .ico. Yo de momento encontré PicPanda.com si que lo permite.
2- Colocar el icono en el blog o web
Una vez creado el icono, para colocarlo en nuestro blog o web solamente tenemos que añadir la siguiente etiqueta entre las etiquetas de la plantilla de nuestro blog o del html de nuestra web:
<link href="'http://URL/favicon.ico'" rel="'shortcut" type="'image/x-icon'/">Una vez colocado ya debería aparecer nuestro icono al lado de la url de la página
<link href="'http://URL/favicon.ico'" rel="'icon'" type="'image/x-icon'/">
3- ¿Y si quiero colocar una gif animado?
Algunas páginas muestran un pequeño gif animado en su FavIcon en lugar de una imagen estática. para ello únicamente hay que realizar los siguientes cambios:
- En el paso 1, además de crear un icono con extensión .ico tenemos que crear un gif animado. Es importante tener en cuenta que el gif también tiene que cumplir con las mismas dimensiones que los ficheros .ico.
- A continuación, en lugar de colocar el código anterior entre las etiquetas debemos incluir el siguiente código:
<link rel="shortcut icon" href="http://url.servidor.imagen/favicon.ico">
<link rel="icon" type="image/gif" href="http://url.servidor.imagen/animated_favicon1.gif">
Nota: las imágenes y gif de nuestros favicon pueden tener las siguientes dimensiones: 16x16, 32x32, 64x64, 128x128, etc. Sin embargo, 16x16 es la única que funciona en todos los navegadores, siendo por tanto la recomendada.
Entradas
