Different Favicon onload?

Question

I'm trying to find away to load a different favicon on page refresh/load. I've had a quick google but noting seems to be showing up in terms of tutorials.

im a bit of a noob with jquery. which part of the approved answer do I add the additional icons? — user2898276, May 08 '14 at 19:41
All the code in that answer is for changing the icon. I'm not sure what else you are asking. — Brad, May 08 '14 at 19:47
Copy the code of the best answer and just replace link.href with the URL of the favicon you want... — Rodrigo Pereira, May 08 '14 at 19:49
Let's say I have 20 icons in my image folder is it a matter of pointing the href to that folder? Then it will pull a different icon out on load?? — user2898276, May 08 '14 at 19:59

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

based on the answer from here: Changing website favicon dynamically I created what you want.

(function() {
    var arrFavicon = ['link_favicon1', 'link_favicon2', 'link_favicon3']; //put your favicon links here

    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = arrFavicon[Math.floor(Math.random()*arrFavicon.length)]; //don't need to change here no matter how many favicons you have
    document.getElementsByTagName('head')[0].appendChild(link);
}());

Now, all you have to do is put your favicons links inside the array arrFavicon and will automatically generate diferents favicons every time that the page is loaded.

edited May 23 '17 at 11:57

Community

1
1

answered May 08 '14 at 20:17

Rodrigo Pereira

1,834
2
17
35

thanks. does this require me hosting the favicons on a url or will it pull them from my img folder? – user2898276 May 08 '14 at 20:22
1

You can use var arrFavicon = ['img/favicon1.ico', 'img/favicon2.ico'] ... got the idea? – Rodrigo Pereira May 08 '14 at 20:24

Different Favicon onload?

1 Answers1