FaviconFaviconPor completar: poner un ejemplo con gif animado (que se supone que funciona en Firefox).
Un favicon es una pequeña imagen que se muestra en la barra de dirección, en la lista de marcadores (favoritos) o en las pestañas del navegador.
Un favicon tiene normalmente un tamaño de 16x16 píxeles, aunque puede tener un tamaño mayor (32x32, 64x64 o 128x128) que actualmente (enero de 2011) los navegadores suelen escalar, pero que puede que en un futuro, con pantallas de mayor resolución, se utilicen directamente.
Si se guarda una imagen en formato ICO (el formato de los iconos de Windows) con el nombre favicon.ico en la carpeta raíz del sitio web, los navegadores utilizan esa imagen como favicon de todas las páginas del sitio (salvo que las páginas enlacen a otro favicon).
Para enlazar a un favicon distinto al del sitio web, las páginas deben contener en el encabezado (<head>) un enlace (<link>) a la imagen que se quiera utilizar.
El primer navegador en mostrar favicons fue el Internet Explorer 4. Desde entonces, Internet Explorer requiere que el favicon sea una imagen en formato ICO, y que el enlace tenga la siguiente sintaxis:
<head> ... <link rel="shortcut icon" href="imagen.ico" /> ... </head>
La IANA publicó en 2003 el tipo MIME image/vnd.microsoft.icon que define el formato de imagen ico. Para crear una imagen en formato ico, se pueden utilizar editores gráficos como IcoFX (sólo para Windows) o páginas web como http://genfavicon.com/. El formato ico permite incluir varias imágenes de tamaños distintos en un mismo archivo.
El favicon no forma parte de ninguna recomendación del W3C, aunque el W3C publicó en 2005 unas recomendaciones sobre favicons, en las que se aconseja utilizar el valor icon para el atributo rel y permitir distintos tipos de imagen mediante el atributo type, como en los ejemplos siguientes:
<link rel="icon" type="image/png" href="imagen.png" /> <link rel="icon" type="image/gif" href="imagen.gif" /> <link rel="icon" type="image/vnd.microsoft.icon" href="imagen.ico" />
La tabla siguiente contiene enlaces a diferentes páginas que contiene enlaces a favicons definidos de maneras distintas. Abriendo los enlaces en el navegador puede comprobarse si el navegador es capaz de mostrar los favicons.
Notas:
| Sintaxis del enlace | Tamaño de imagen (píxeles) | |||
|---|---|---|---|---|
| 16x16 | 32x32 | 32x32+16x16 | ||
  |
<link rel="shortcut icon" href="cdlibre.ico"/> |  |
 |
|
 |
<link rel="icon" type="image/png" href="cdlibre.png" /> | |
|
|
| |
<link rel="icon" type="image/vnd.microsoft.icon" href="cdlibre.ico"/> | |
|
|
Volver al principio de la página
Autor: Bartolomé Sintes Marco