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.


El primer navegador en mostrar favicons fue el Internet Explorer 4. Hasta IE 8, Internet Explorer requería que el favicon fuera una imagen en formato ICO, y que el enlace <link> incluido en el <head> tuviera la siguiente sintaxis:

<head>
  ...
  <link rel="shortcut icon" href="http://wwww.ejemplo.org/favicon.ico" />
  ...
</head>

En la barra de dirección, el tamaño del favicon es bastante reducido, 16x16 píxeles, pero en otros lugares como los marcadores podía tener un tamaño mayor (24x24, 32x32, 48x48 o 64x64). Internet Explorer utilizaba el formato ICO de Windows, que permite guardar varias imágenes independientes en un único archivo .ico.

Para crear una imagen en formato .ico, se pueden utilizar editores gráficos como IcoFX (sólo para Windows), pero resulta más cómodo utilizar aplicaciones web como http://www.favicomatic.com/ o https://realfavicongenerator.net/, que crean todos los archivos necesarios a partir de una imagen. Como mínimo se aconseja incluir dos tamaños imágenes, 16x16 y 32x32, pero se pueden incluir también los tamaños 24x24, 48x48 y 64x64 (aunque eso aumenta bastante el tamaño del archivo .ico).

Si se incluye un archivo favicon.ico en la carpeta raíz del sitio web, los navegadores utilizan automáticamente esa imagen como favicon de todas las páginas del sitio, sin que sea necesario incluir la etiqueta <link>. La etiqueta <link> es necesaria si se quieren utilizar otros formatos de imagen, guardarlo en otras carpetas o hacer que diferentes páginas hagan referencia a favicons diferentes (dando diferentes valores al atributo href).


Con el paso del tiempo, otros navegadores permitieron que se pudieran utilizar otros formatos de imagen (GIF, PNG, SVG, etc.), pero este es un aspecto que todavía no está completamente resuelto. Por ejemplo, desde hace años muchos navegadores admiten favicons en formato PNG (Can I use), pero el formato SVG sólo lo admite actualmente (enero de 2017) Firefox (Can I use).


La IANA definió en 2003 el tipo MIME image/vnd.microsoft.icon que define el formato de imagen ico.

En 2005, el W3C publicó unos consejos sobre favicons, en las que se aconsejaba utilizar el valor icon para el atributo rel (en vez de shortcut icon) e indicar los 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 recomendación HTML 5 fue la primera en definir los favicons, añadiendo a los consejos del 2005 el atributo sizes, para indicar los tamaños de las imágenes (para imágenes escalables, como SVG, se puede utilizar el valor any), como en los ejemplos siguientes:

<link rel="icon" type="image/png" href="imagen.png" sizes="64x64" />

<link rel="icon" type="image/svg+xml" href="imagen.svg" sizes="any" />

<link rel="icon" type="image/vnd.microsoft.icon" href="imagen.ico" sizes="16x16 24x24 36x36 48x48" />

En vez de utilizar un fichero .ico con varias imágenes, se puede hacer referencia a varias imagenes para que el navegador elija la más conveniente en cada situación:

<link rel="icon" type="image/png" href="imagen_16.png" sizes="16x16" />

<link rel="icon" type="image/png" href="imagen_32.png" sizes="32x32" />

<link rel="icon" type="image/png" href="imagen_64.png" sizes="64x64" />

...

Desgraciadamente, en los últimos años, los navegadores de los móviles han complicado esta situación, ya que utilizan imágenes en muchos tamaños diferentes y con etiquetas no normalizadas para distintos fines.

En estos apuntes no se trata este problema, pero en la web se pueden encontrar artículos que tratan de aclarar esta situación, que ojalá se simplifique en los próximos años:

Si se quieren incluir en una web todos los tamaños de imágenes y las etiquetas requeridas por los diferentes navegadores, lo más fácil es utilizar aplicaciones web especializadas en esta tarea (como http://www.favicomatic.com/ o https://realfavicongenerator.net/) y hacerlo periódicamente para comprobar las novedades en este campo.

Ejemplos

En la tabla siguiente, los iconos son enlaces a páginas que enlazan a diferentes tipos de favicons (en total, hay 8 ejemplos).

Sintaxis del enlace Tamaño de imagen (píxeles)
16x16 32x32 32x32+16x16
<link rel="shortcut icon" href="cdlibre.ico" />
favicon tamaño 16x16 favicon tamaño 32x32 favicon tamaño 32x32
<link rel="icon" type="image/png" href="cdlibre.png" />
favicon tamaño 16x16 favicon tamaño 32x32
<link rel="icon" type="image/vnd.microsoft.icon" href="cdlibre.ico" />
favicon tamaño 16x16 favicon tamaño 32x32 favicon tamaño 32x32

Notas:

Favicons animados

Un favicon animado es un gif animado al que se le ha cambiado la extensión .gif por la extensión .ico.

Firefox admite favicons animados, pero Internet Explorer y Google Chrome no.

Incorrecto en Chrome Correcto en Firefox Incorrecto en Internet Explorer

Página de ejemplo que usa el gif animado siguiente: GIF animado

Referencias: