Favicon

Qué es un favicon

Un favicon es la pequeña imagen que se muestra en la pestaña del navegador o en la lista de marcadores (favoritos). En la barra de dirección, el tamaño del favicon es bastante reducido, 16x16 píxeles, pero en otros lugares como los marcadores puede tener un tamaño mayor (24x24, 32x32, 48x48 o 64x64).


El primer navegador en mostrar favicons fue el Internet Explorer 5 (publicado en 1999). Internet Explorer utilizaba el formato ICO de Windows, que permite guardar varias imágenes de distintos tamaños en un único archivo .ico.

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 los navegadores admiten favicons en formato PNG (Can I use), pero el formato SVG sólo lo admite actualmente (octubre de 2018) 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 del valor shortcut icon que utilizó Internet Explorer hasta su versión 8) 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">

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


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 tratan estos problemas, 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.

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

Ejemplos de favicons

Los ejemplos siguientes utilizan diferentes tipos de favicons (ICO, PNG y SVG).

Hueco
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon-cdlibre-16.ico" sizes="16x16">
ERROR (no puede mostrarse el objeto)
Enlace externo
Hueco
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon-cdlibre-32.ico" sizes="32x32">
ERROR (no puede mostrarse el objeto)
Enlace externo
Hueco
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon-cdlibre-32-16.ico" sizes="16x16 32x32">
ERROR (no puede mostrarse el objeto)
Enlace externo
Hueco
<link rel="icon" type="image/png" href="favicon-cdlibre-16.png" sizes="16x16">
ERROR (no puede mostrarse el objeto)
Enlace externo
Hueco
<link rel="icon" type="image/png" href="favicon-cdlibre-32.png" sizes="32x32">
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox Incorrecto en Edge
<link rel="icon" type="image/svg+xml" href="favicon-cdlibre.svg" sizes="any">
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores

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 y Edge admiten favicons animados, pero Google Chrome no.

Incorrecto en Chrome Correcto en Firefox Correcto en Edge
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores

Referencias: