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 (véase caniuse), pero actualmente (octubre de 2022) Safari todavía no admite el formato SVG (véase caniuse).
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:
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:
En vez de utilizar un fichero .ico con varias imágenes, se puede hacer referencia a varias imágenes para que el navegador elija la más conveniente en cada situación:
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 https://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 https://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).
