# Favicon

## Qué es un favicon

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 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.

## Historia de los favicons

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" />

## Ejemplos

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:

- Internet Explorer 9 muestra los favicons enlazados con el valor icon para el atributo rel, pero Internet Explorer 8 no lo hacía, como se comenta en la página de diferencias entre Firefox e Internet Explorer .
- Internet Explorer no muestra los favicons si las páginas no están colgadas en un servidor (es decir, si se abren como un archivo local).

Volver al principio de la página

## Favicons animados

Firefox admite favicons animados, en forma de gifs animados, pero parece que Internet Explorer y Google Chrome no.

Completar con ejemplos

Referencias:

- http://www.eyestormstudio.com/blog/?p=8

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.