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:
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')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(); });
