Como crear un favicon dinámico

¿Haz pensado alguna vez, que utilizando JavaScript se puede crear un favicon distinto para cada página de un Sitio Web? Por si no lo sabes, un favicon es el icono que esta asociado a la bookmark de un sitio web y que algunas veces suele acompañar a la url en la barra de direcciones... si usas firefox u Opera te habrás percatado de su existencia.

¿Porqué un favicón dinámico? La idea de tener un favicon dinámico (cambiante) es la de proporcionar a tus lectores, por ejemplo, la posibilidad de identificar fácilmente un artículo, noticia ó una página en particular de todo tu sitio web.

Esto es lo que pensó Michael Mahemoff al crear una pequeña librería JavaScript llamada favicon.js. Y en su artículo Dynamic Favicons explica como usarla en nuestro website. El código es el siguiente:

var favicon = {

change: function(iconURL, optionalDocTitle) {
if (arguments.length==2) {
document.title = optionalDocTitle;
}
this.addLink(iconURL, "icon");
this.addLink(iconURL, "shortcut icon");
},

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; // Assuming only one match at most.
}
}
},

docHead:document.getElementsByTagName("head")[0]
}

Y creó dos ejemplos para verlo en funcionamiento: