2 de julio de 2010

FAVICON

Puede que muchos de vosotros no sepais qué es un favicon. Mas que nada, porque yo sé lo que es desde esta noche.
Despues de duro trabajo para diseñar mi web, validarla, contratar dominios, configurar ftp, subirla,... cuando ya creía que estaba todo perfecto, me quedo mirando la pestaña del navegador en la que estaba abierto, y veo que todas tienen un pequeño icono que te indica rápidamente sin necesidad de leer el texto, qué página has abierto.
La mía tenía el típico icono de una página blanca con la esquinita doblada. Vamos, que una mierda.

Para que os hagáis una idea

Y no podía ser, que después del trabajo que me llevó hacerla, no quedase perfecta del todo. Era una pena que al abrir la página se viese ese icono que daba a entender que o me dá igual, o que no tengo ni idea...
Así que me puse a buscar, y al menos, encontré el nombre del dichoso iconito de las pestañas: Favicon.
"Un favicon, del inglés favorites icon (icono de favoritos), también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular. Los navegadores gráficos suelen mostrar el favicon de la página visitada, si ésta lo posee, en la barra de direcciones y en el encabezado de la pestañacorrespondiente. Asimismo los utilizan para identificar más fácilmente las páginas, presentándolos junto a sus respectivos títulos, en las listas de marcadores o favoritos, en los historiales de páginas visitadas y de navegación reciente, y toda vez que deban hacer referencia a ellas." (De wikipedia)
Ahora os explico como se hace.
Lo primero, debéis escoger la imagen que queréis utilizar. En mi caso, escogí un círculo, así que para que el fondo del cuadrado en el que no había imagen quedase transparente, lo guardé como .gif.
Para crear un archivo favicon.ico, debeis entrar en un generador de favicon, y en él, cargar el gif. También se puede hacer a mano, coloreando los pixeles, pero eso lo dejaremos para los mas manitas.
El resultado es un icono de 16x16 pixeles, que seguramente no os convencerá, pero al reducirlo, queda perfecto.
Nos vamos a Deamweaver. En la carpeta del sito, es decir, al mismo nivel que los .html a los que queremos aplicar el favicon, colocamos el archivo favicon.ico.
Y en el código html de cada archivo .html en el que queramos que aparezca, pegamos este código entre head y /head :

Subimos la página y listo.
En algunas web he encontrado que tambien utilizan el código:
Pero suele dar problemas con navegadores como el Google Chrome, de modo que si utilizais el primero que os he dejado, daréis en el clavo a la primera.

2 comentarios:

  1. Interesante, siempre tuve curiosidad por saber como se llamaban esos iconos. Desde que usáse Firefox por primera vez hace años y me diese cuenta al tener muchas pestañas abiertas... y siempre se daba el caso de que eran webs de ese estilo que comentas. Gracias por la info!

    ResponderEliminar
  2. Nos alegra haberte sido de ayuda y que te interese el contenido de nuestro blog. Un saludo!

    ResponderEliminar