Cambiar el favicon de modo dinámico

No sé hasta que punto esto tendrá utilidad alguna pero, se me ocurrió buscar en la web a ver si existía alguna forma sencilla de cambiar el favicon de una página; es decir, tener uno pro defecto y cambiarlo por otro ya sea por la acción de un usuario (un click en alguna parte) o de manera aleatoria.

Había muchas respuestas y dudas que, naturalmente, incluían diferencias entre los navegadores (Internet Explorer y Chrome son problemáticos), funciones complicadas, etc etc pero, en un foro, alguien propone una solución que funciona bastante bien en Firefox, Chrome y Opera y que se basa en este artículo.

La función sería esta:

<script>
var IE = navigator.userAgent.indexOf("MSIE")!=-1;
var favicon = {
  change: function(iconURL){
    if (arguments.length == 2){document.title = optionalDocTitle;}
    this.addLink(iconURL, "icon");
    this.addLink(iconURL, "shortcut icon");
    if (!IE) {
      if (!window.__IFrame){
        __IFrame = document.createElement('iframe');
        var s = __IFrame.style;
        s.height = s.width = s.left = s.top = s.border = 0;
        s.position = 'absolute';
        s.visibility = 'hidden';
        document.body.appendChild(__IFrame);
      }
      __IFrame.src = 'about:blank';
    }
  },
  addLink: function(iconURL, relValue) {
    var link = document.createElement("link");
    link.type = "image/x-icon";
    link.rel = relValue;
    link.href = iconURL;
    this.removeLinkIfExists(relValue);
    this.docHead.appendChild(link);
  },
  removeLinkIfExists: function(relValue) {
    var links = this.docHead.getElementsByTagName("link");
    for (var i=0; i<links.length; i++) {
      var link = links[i];
      if (link.type == "image/x-icon" && link.rel == relValue) {
        this.docHead.removeChild(link);
        return;
      }
    }
  },
  docHead: document.getElementsByTagName("head")[0]
}
</script>

Una vez agregada, bastaría ejecutarla con algo así:

favicon.change('url_imagen')

Por ejemplo, esta es una lista de imágenes cualquiera, haciendo click en cada una de ellas, el favicon de esta página, cambiará:

Es simple; estoy usando imágenes en formato gif pero pueden usarse otras, incluyendo formatos ico:

<img onclick="favicon.change('http://www.google.com/favicon.ico');" src="http://www.google.com/favicon.ico" />

Para que sea aleatorio, colocamos las imágenes en un array y seleccionamos una cualquiera:

function favalea() {
  // lista de imágenes a utilizar
  misFavicons=new Array('url_imagen_1','url_imagen_2','url_imagen_3','url_imagen_4');
  // elegimos una al azar y llamamos a la función
  favicon.change(misFavicons[Math.floor(Math.random()*misFavicons.length)]);
}

Y una etiqueta cualquiera que la ejecute:

<span style="cursor:pointer;" onclick="favalea()">favicon al azar</span>

o ejecutamos la función cuando la página esté cargada:

window.onload = (function(){ favalea(); });

favicon al azar