Wikipedia quote: “A favicon (short for “favorites icon”), also known as a page icon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many graphical web browsers—such as recent versions of Internet Explorer, Firefox, Mozilla, Opera, Safari, iCab, AOL Explorer, Epiphany, Konqueror, and Flock—can then make use of them.”
Here, you will learn a method how to change page favicon dynamically while the page is already loaded. This method is supported by FF 1.0+ and OP 8.0+ no exploder though :(
Source code for webtoolkit.favicon.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
/**
*
* Dynamic favicon
* http://www.webtoolkit.info/
*
**/
var DynFavIco = {
// private properties. Browser detect. Do not touch! :)
IE : ( document.all && document.getElementById && !window.opera ),
FF : (!document.all && document.getElementById && !window.opera ),
el : null,
// private method.
init : function () {
if ( DynFavIco.FF ) {
document.addEventListener("DOMContentLoaded", DynFavIco.domReady, false);
} else {
if ( DynFavIco.IE ) {
document.write("<scr" + "ipt id=__ieinit_DynFavIco defer=true " +
"src=//:><\/script>");
var script = document.getElementById("__ieinit_DynFavIco");
script.onreadystatechange = function() {
if ( this.readyState != "complete" ) return;
this.parentNode.removeChild( this );
DynFavIco.domReady();
};
script = null;
} else {
window.onload = DynFavIco.domReady;
}
}
},
// private method.
domReady : function () {
DynFavIco.el = document.createElement('span');
DynFavIco.el.style.display = 'none';
document.body.appendChild(DynFavIco.el);
},
// public method.
change : function (icon) {
DynFavIco.el.innerHTML = '<link rel="shortcut icon" href="'+icon+'">';
}
}
DynFavIco.init();
|