JMiur [E]

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

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

6 comentarios:

Beben Koben  

WOW...fantastic ck ck ck
how about change the title master :D
xixixixi

JMiur  

That's easy. You can do it with one line:

document.title = "the new text";

Responder
Orlando Francisco Menéndez  

¡Está genial!Siempre me producen asombro las entradas de este blog. Saludo cordial.

JMiur  

Saludos, Orlando :-)

Responder
Revista Pixel MX  

Excelente truco!
como lo aplicarías para header al azar?

JMiur  

Aclárame un poco tu idea porque el favicon nada tiene que ver con el header de un sitio.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR