If you want it to work on most browsers, you need to “manually” switch the images
var favicon_images = [
'http://website.com/img/tmp-0.gif',
'http://website.com/img/tmp-1.gif',
'http://website.com/img/tmp-2.gif',
'http://website.com/img/tmp-3.gif',
'http://website.com/img/tmp-4.gif',
'http://website.com/img/tmp-5.gif',
'http://website.com/img/tmp-6.gif'
],
image_counter = 0; // To keep track of the current image
setInterval(function() {
// remove current favicon
if(document.querySelector("link[rel='icon']") !== null)
document.querySelector("link[rel='icon']").remove();
if(document.querySelector("link[rel='shortcut icon']") !== null)
document.querySelector("link[rel='shortcut icon']").remove();
// add new favicon image
document.querySelector("head").insertAdjacentHTML('beforeend', '');
// If last image then goto first image
// Else go to next image
if(image_counter == favicon_images.length -1)
image_counter = 0;
else
image_counter++;
}, 200);
You can see this working here: https://usefulangle.com/post/45/animate-favicon-gif-javascript
CLICK HERE to find out more related problems solutions.