How to animate a favicon?

Question

How to animate a favicon like that?

animated favicon

It seems to work only in Firefox.

user_169992 · Answer

There are repos on GitHub demonstrating how to do this.

http://lab.ejci.net/favico.js/example-simple/

Essentially they draw on the canvas and then do canvas.toDataURL('image/png') and then set the href to that data-url.

user_387194 · Answer

I've created a library to animate favicon, default is loader animation (it's generated by canvas), but it also support gif animation for browser that don't support gif out of the box (from version 0.3.0).

API is simple

favloader.init({
    color: 'red'
});

favloader.start();
favloader.stop();

From version 0.4.0 the library allow to create custom animation, using callback function that will generate a frame on canvas:

favloader.init({
   frame: function(ctx /* canvas context 2D */) {
   }
});

and user will be able to draw single frame

NOTE: Things to consider if you want to implement something like this:

to animate when tab is not active use web worker,
don't use requestAnimationFrame, because it stop executing in MacOSX/Chrome even in web worker.

user_10679993 · Answer

To animate the favicon for pretty much ALL browsers, the following worked for me:

Download an image of each frame of the gif.
Link the first image as an icon with an id:
```
  
```

Create a function to loop, and use setTimeout() for each image. The times are variable and can be set to however fast you would like the animation. Here's an example:

function iconChange() {
setTimeout(function(){ document.getElementById("icon").href = "/image1.png";}, 333);
setTimeout(function(){ document.getElementById("icon").href = "/image2.png";}, 667);
setTimeout(function(){ document.getElementById("icon").href = "/image.png";}, 1000);  
}

Create a loop when the window loads:

window.onload = function() {
setInterval(function() {
iconChange();
}, 250);
};

This method just helps to ensure that more browsers can see the animation, because other methods only work in certain browsers, and browser versions.

user_8583692 · Answer

This only works in Firefox (as far as I know).

Major browsers now support SVG favicons. And, SVGs can be animated using SMIL.

So, as an alternative to GIF, you can use SVG favicon and get its other benefits too.
For a detailed answer about how to use SVG favicons refer to this post.

For example, this is the code for my animated SVG logo (which can be used as a favicon):

And this is the result:

How to animate a favicon?

7 Answers

This only works in Firefox (as far as I know).