How to Animate a Favicon in (Most) Browsers with Javascript

An animated GIF favicon can be set through the <link> tag, but as of now only Firefox allows it.

<-- Animated GIF will work only in Firefox -->
<link rel="icon" href="http://example.com/favicon.gif" type="image/gif" />

In rest of the browsers, GIF will be displayed, but without animations. To achieve the animated effect in them, you need to include some Javascript that will do the following :

An animated GIF is nothing but a sequence of images playing one after the other at a specified frame rate.
So you need to keep changing the current favicon image to the next image at short intervals of time. This can be done through setInterval function.

Animating a Set of PNG images is Also Possible

It is also possible to animate a set of PNG images. Browsers also allow PNG as a favicon.

<link rel="icon" href="http://example.com/image.png" type="image/png" />

In this tutorial, a GIF favicon is discussed. However the logic to animate a set of PNG images remains the same, you just have to change the image format wherever required.

Step 1 : Extract All Frames Inside the Animated GIF

Extract all the frames inside the animated GIF file and save them as individual images. These are the set of images you are supposed to loop over, and show as favicon. You can use an online tool such as this to explode an animated GIF.

Step 2 : Include Javascript to Keep Changing the Favicon Image at Regular Intervals

A small bit of Javascript will loop over the extracted images at regular intervals of time :

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', '<link rel="icon" href="' + favicon_images[image_counter] + '" type="image/gif">');
    
    // 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);

An important point is to note that you need to remove the favicon <link> tags first, and then re-insert it. Just changing the href attribute won't work.