Minitutorial: Icono de la barra de direcciones
Nota: Este “tutorial” ya lo hice hace un tiempo para Qabalha, aunque he mejorado algunas cosas. Bueno, en realidad solo queda la idea, lo he reescrito todo de nuevo.
Mucha gente probablemente encuentre inútil el icono en la barra de direcciones (también llamado favicon), es más, para la mayoría de usuarios no tiene mucha importancia, pero es algo que nos ayuda a distinguir nuestra web del resto en la barra de favoritos haciéndola más visible. Además, el tener un favicon da lugar a que otras webs nos enlacen no solo con texto, sino con este icono al lado del texto (o solo el icono), por lo que queda más visible al usuario de esa web llevando, posiblemente, más visitas a la nuestra. Es importante que nuestro favicon sea único y se note la relación con la web, no me hagas un icono con una foto porque no se ve, o un pokémon para una web de gadgets, si no identifica tu web no sirve para nada… Y para usuarios como yo, que tengo los ‘favoritos’ solo mostrando el icono, es tremendamente útil, pues si no existiese este icono no podría hacer esto o me tendría que aprender la posición de cada uno, por si no sabes a que me refiero con lo de mis enlaces aquí lo tenéis, los iconos de arriba, a eso me refiero, esto lo hago para ganar espacio vertical (además al no tener nombres caben más):
Bueno, vamos con el tutorial en sí que sino no acabo nunca, y eso que era un “minitutorial”. Lo primero de todo será hacer la imágen, la hacemos a un tamaño cómodo para trabajar, eso sí, formato cuadrado. Una vez tenemos la imagen lo que podemos hacer es cambiarle el tamaño a 16×16 y guardarla como gif o jpg, aunque la mejor opción en realidad sería tenerlo como icono, para eso hay un plugin para Photoshop (creo que para Gimp no vale, aunque hay varias maneras de convertir a icono imágenes) que puedes descargar en Telegraphics que te permite guardar como .ico (yo lo acabo de descubrir haciendo este minitutorial, hasta ahora usaba una imagen gif, antes de guardarlo como icono tenemos que cambiarle el tamaño a 16×16, que sino nos hace el icono de 100×100 o el tamaño con el que lo hemos hecho y es recomendable que sea de 16×16, sino puede dar problemas en algunos navegadores).
Una vez tenemos el icono lo subimos a nuestra web y lo ponemos en la carpeta inicial de la web (en el caso de un blog con Wordpress o otro sistema de publicación también sería en esa carpeta y no en la del theme), al esta en esta carpeta y con el nombre “favicon.ico” ya es posible que algunos navegadores lo detecten y ya no tengamos que hacer nada más, pero como queremos que salga en todos los navegadores (amenos todos los que soporten favicon) añadiremos en la cabecera (es decir entre las etiquetas <head> y </head>) dos lineas de código:
<link rel="icon" href="http://tuweb.com/favicon.ico" />
<link rel="shortcut icon" href="http://tuweb.com/favicon.ico" />
Con esto ya estaría listo, ya tenemos un favicon en nuestra web. Es fácil y rápido, solo que me he extendido un poco demasiado para acabar un tutorial que en realidad debería ser algo así de corto: haces un icono, lo metes en esta carpeta y añades este código en tu plantilla. Pero me gusta explicar las cosas tranquilamente y razonando el porque tener un favicon.
Escrito por Guill3m el 5 de Octubre de 2007 en las categorias: Diseño Web, Tutorial
