Forum:Dynamic favicon javascript

Not sure if anyone cares about this, but I thought I'd share it because some people might want to know. I recently discovered how to dynamically replace a favicon using javascript after doing a few google searches and a little tinkering (I don't really know javascript very much). For example, if you don't like Wikia's new favicon, you can add the following code to Special:MyPage/wikia.js here on community central to revert it back to the iconic curly W. /* Dynamically replace favicon with the old curly W */ $(function {   var link = document.createElement('link');    link.type = 'image/x-icon';    link.rel = 'shortcut icon';    link.href = 'http://images3.wikia.nocookie.net/__cb20111116173360/central/images/archive/6/64/20120405205346%21Favicon.ico';    document.getElementsByTagName('head')[0].appendChild(link); }); /* END dynamically replace favicon with the old curly W */

Anyways, if anybody with javascript knowledge sees this, please comment which browsers this works for, consider adding functionality for other browsers, and maybe add this to http://www.dev.wikia.com. I can confirm that this works for me on Chrome on my laptop, but that's all I know at the moment. — Mathmagician 21:42, April 12, 2012 (UTC)


 * Works for me on FireFox 11 (Win7x64). I think you can do this in a JQuery one-liner, but I'll have to play with it. -- Fandyllic (talk &middot; contr) 12 Apr 2012 4:34 PM Pacific


 * This doesn't work:


 * -- Fandyllic (talk &middot; contr) 13 Apr 2012 4:24 PM Pacific


 * Are we allowed to make random favicons? With this code combined with the random wordmark code, then it seems like a random favicon is possible... (for everyone, not just one user) 70.24.248.211 06:09, April 13, 2012 (UTC)


 * Mathmagician's code works in Firefox. Fandyllic's doesn't seem to do so. It's a little hard to tell though. Browsers cache favicons aggressively so it's possible that I ran Mathmagician's code at just the right moment...


 * But neither works in Internet Explorer. That would have been a surprise though. Internet Explorer works for the alien invaders. --


 * Odd, I tested my code on FireFox 11 (Win7x64). Maybe I was seeing Mathmagician's code working and the cache had not cleared, because it isn't working anymore. Darn. I'll have to keep experimenting. -- Fandyllic (talk &middot; contr) 13 Apr 2012 4:12 PM Pacific

A small footnote: Both of you are using the ready function incorrectly. The idea is to pass an anonymous function to be executed when the DOM has fully loaded. But those empty parenthesis behind the function declaration cause it to be executed immediately. So what you pass to ready is not the function itself, but its return value - which is undefined. --


 * Thanks for the insight, I removed the empty parenthesis after the declaration above now. By the way, I also tried Fandyllic's code in Chrome and it didn't want to work. It could be that changing the href attribute isn't good enough--because of caching, you actually have to create a new tag--at least, most of the examples I saw involved creating a new . Of course, no surprise to me if this doesn't work for IE. The old version of IE that I have (8, I believe) doesn't really do favicons except for bookmarks. That was actually one of the reasons I moved away from IE in the first place, because I couldn't tell which tab was which. That, and I wanted a faster browser. — Mathmagician 03:54, April 14, 2012 (UTC)


 * You could haved removed the ready function altogether. Your code obviously works without the added delay (and without jQuery).


 * I just took a quick look at the source of that favicon game I linked to above and this is (more or less) what that guy does:


 * He essentially replaces the favicon. Which makes sense since he animates it. Adding thousands upon thousands of favicons to the document would probably be a bad idea :) --

Would something like

function RandomIcon {	var iconArray = new Array; iconArray[0] = 'some .ico URL here'; iconArray[1] = 'some .ico URL here'; iconArray[2] = 'some .ico URL here'; iconArray[3] = 'some .ico URL here';

var chosenIcon = Math.round(Math.random * (iconArray.length - 1));

var icon = $('link[rel="shortcut icon"]');

icon.replaceWith(icon.clone.attr('href', iconArray[chosenIcon])); }

addOnloadHook(RandomIcon); work?

ForestMonthZero 10:33, April 25, 2012 (UTC)


 * Why don't you try it? --