Dicho icono apareció con el Internet Explorer 5.0 y era un icono que aparecía cuando una página se añadía a favoritos. Debido a este uso, el archivo se llamó favicon.ico, y era el propio navegador el que lo buscaba.
Mas adelante ha sido adoptado por todos los navegadores, pero ni se muestra solo cuando se añade favoritos -ahora se muestra siempre-, ni se busca automaticamente, ni tan siquiera es necesário que se llame favicon.ico (precisamente por lo anterior, no se busca automáticamente).
Normalmente los navegadores soportan todos los formatos de imagen, pero no siempre. En el caso de Internet Explorer, sólo se soportan ficheros en formato .ico (formato propietario de Microsoft) de tamaño 16x16. Por ésto, si deseamos que todos vean el icono es necesário hacerlo en éste formato. Además, es recomendable que se usen sólo 16 colores (4 bits) de la paleta estándard, por razones de compatibilidad.
Al final, la cosa queda:
- Formato .ico (Micro$oft).
- 16 colores.
- 16x16 píxeles.
- Recomenado: paleta estándard.
Cuando tenemos la imágen, la subimos al direcório raíz de nuestra web con el nombre de favicon.ico. Esto no es necesário, pero hará compatible el icono con algún usuario que aún use Internet Explorer 5.
Entonces, en el header de la página ponemos el código para incluir el icono:
<html>
<head>
[...]
<link rel="shortcut icon" href="http://www.servidor.com/favicon.ico" /><link rel="icon" href="http://www.servidor.com/favicon.ico" type="image/x-icon" />
[...]
</head>
<body>
[...]
</body>
</html>
La barra naranja es necesária para XHTML, mientras que no se ha de poner cuando usamos HTML normal.
Con ésto tendremos nuestro icono bien colocadito y compatible con todos los navegadores que lo soportan.
Editado por Daniel el 07/02/2007 a las 20:24:24h.