FaviconFaviconUn 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 2012) 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. Internet Explorer (hasta IE 8) requería que el favicon fuera una imagen en formato ICO, y que el enlace tuviera 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 (en total, hay 8 ejemplos). Abriendo los enlaces en el navegador puede comprobarse si el navegador es capaz de mostrar los favicons.
| 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"/> | |
|
|
Notas:
Volver al principio de la página
Firefox admite favicons animados, en forma de gifs animados, pero parece que Internet Explorer y Google Chrome no.
Completar con ejemplos
Referencias:
Volver al principio de la página
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.