[Indice]


¿Qué son los iconos?

Las últimas generaciones de navegadores soportan unos pequeños ficheros de imagen que ayudan a identificar de forma visual los distintos servidores. Sin duda los habrás visto en tu navegador, a la izquierda de la dirección a la que te has conectado, en la llamada ventana de URL. También aparecen en tu libro de direcciones, en lo que se ha dado en llamar "favoritos".

Estos pequeños ficheros gráficos cuya extensión es .ico se denominan "iconos", y son los mismos que se utilizan para identificar cualquier programa de Windows. Los ficheros .ico no son internamente lo mismo que un fichero .jpg o .gif   Es decir, son un tipo de gráfico de distinto formato, y se caracterizan sobre todo por su extrema ligereza, que suele ser de unos pocos bytes. En internet tienes gran cantidad de programas para ver, crear o editar iconos. También hay programas capaces de convertir un fichero típico .jpg o .gif a .ico   y por supuesto, tienes miles de librerías de iconos ya hechos.

Implementar los iconos en tus páginas HTML es muy sencillo. Solamente tienes que conseguir tu icono y ponerlo en el directorio raiz de tu servidor. Por defecto, y sin necesidad de escribir nada en el código HTML de la página, los navegadores solicitan al servidor un fichero de icono llamado favicon.ico   Este curioso nombre es una contracción del inglés (cómo no) de "favourite icon" es decir icono favorito, y se inventó para facilitar la identificación visual de las direcciones de tus webs favoritos.

El fichero de icono puede tener cualquier otro nombre, y estar en cualquier otro sitio, pero entonces hay que decirle al navegador donde tiene que buscarlo, igual que se hace con un fichero gráfico típico. La sintaxis para insertar un icono que no tenga los valores por defecto, es diferente de la de los gráficos normales, y hay que escribirla en la HEAD de la página:


<HTML>
<HEAD>
  <TITLE>Prueba de iconos</TITLE>
  <link rel="shortcut icon" href="http://tu_servidor/iconos/favicon.ico">
  </HEAD>
<BODY>

Esto es una prueba con iconos

</BODY>
</HTML>

Esta sería la sintaxis en el caso de que el icono esté en un servidor distinto del nuestro. Lo normal será que esté en nuestro propio servidor, y entonces bastará con poner la ruta relativa.


<HTML>
<HEAD>
  <TITLE>Prueba de iconos</TITLE>
  <link rel="shortcut icon" href="/iconos/favicon.ico">
  </HEAD>
<BODY>

Esto es una prueba con iconos

</BODY>
</HTML>

Generalmente el icono pretende facilitar la identificación del servidor, no de los contenidos. Si se pone el fichero favicon.ico en el directorio raíz del web, el icono aparecerá en todas las páginas sin necesidad de escribir nada en ninguna de ellas. Pero si quieres que el icono sea diferente en cada grupo de páginas, por ejemplo, en cada directorio, entonces tienes que escribir la llamada correspondiente en cada página, la que no la lleve, mostrará el icono del directorio raiz, si lo tiene.

[Indice]