3/2/08

CÓMO HACER UN FAVICON


Un "favicon" (imagino que es la contracción de favorite icon) es un iconito de 16x16 pìxeles que se coloca automáticamente cuando visitamos algunos sitios web como por ejemplo google (fijate en la barra de direcciones que sale un iconito con la G).

La ventaja adicional es que también cuando tu guardas un favorito o marcador de la página que tiene el favicon, éste se guarda con dicha referencia y aparece en tu listado de favoritos, permitiendo que el usuario localice tu página más fácilmente.Pues bien, este iconito no es que se coloque automáticamente por arte de magia (obviamente), sino que lo tienes que crear tú mismo y colocarlo en tu sitio, vamos a ver cómo crearlo:

En Photoshop:

1. Debes bajar el plugin que te permitirá, en Photoshop, guardar archivos como .ICO que son los necesarios para crear íconos. Descarga gratuitamente el plugin y luego cópialo en la carpeta "formatos de archivo" dentro de "plugins" (típicamente esta carpeta se encuentra en C:\Archivos de programa\Adobe\Photoshop CS\PlugIns\Formatos de archivo).
2. Reinicia tu Photoshop y ya permitirá leer y guardar archivos .ICO
3. Create un archivo nuevo de 16x16 pixeles y con fondo transparente.
4. Dibuja tu icono y guárdalo como favicon.ico en la carpeta raíz de tu sitio web.
5. Si lo prefieres también puedes redimensionar un dibujo o una foto que tengas a mayor tamaño, volviéndola de 16x16 (por el menú 'Imagen' opción 'Tamaño de la imagen').

En línea (si no tiene Photoshop):

2. Presionas el botón de examinar que aparece al lado de 'Source Image' y seleccionas la imagen que quieres volver un ícono (si lo deseas puedes añadir un texto que se moverá animado).
3. Presionas el botón 'Generate Favicon.ico' y esperas a que se cargue de nuevo la página.
4. Una vez cargada, en la página aparece un botón 'Download Favicon', presiónalo y te descargará el ícono, con su versión animada e incluso las instrucciones de cómo insertarlo en tu página.
5. Si lo que deseas es dibujarlo puedes hacerlo en la página http://www.degraeve.com/favicon/

Cómo colocarlo en tu sitio

1. Subes el ícono a la raíz de tu sitio.
2. Le agregas, entre las etiquetas del head de tu página, lo siguiente instruccion entre < >
3. link rel="shortcut icon" href=http://www.tusitio.com/favicon.ico
4. Y listo!!! ya puedes disfrutar de tener un sitio web con favicon...
Encuentra éste y otros tips sobre web en: http://www.conocimientovirtual.com/

No hay comentarios: