How to animate a favicon?

How to animate a favicon like that?

It seems to work only in Firefox.

While it's currently only supported by Firefox other browsers will hopefully support it in the future. To achieve the effect, you need to upload the gif to your server and then add the line below to head section of your page:

<link rel="icon" href="animated_favicon.gif" type="image/gif" >

Take a look at AnimatedFavIcon.com for additional help and resources.

Almost certainly not what you're looking for, but some people have gone so far as to programatically write to the favicon in client side JavaScript. The following url shows the old videogame 'Defender' playing in the favicon:

http://www.p01.org/defender_of_the_favicon/

This works in Firefox, Opera and Safari, but not in at least older versions of IE. I'm not sure what the latest IE might be capable of.

Doing a 'view source' on this page makes for quite an interesting read.

Firefox

Firefox supports animated favicons. Just add a link to the GIF in <link rel="icon"> tag:

<link rel="icon" href="/favicon.gif">

You can also use animated ICO file. In this case browsers that doesn't support animated favicons will display only the first frame.

Other browsers

In other browsers you can animate a favicon using JavaScript. You just have to extract single frames from the GIF and change <link rel="favicon"> src every time the GIF frame changes. See this code for example (JS Fiddle demo):

var $parent = document.createElement("div")
    $gif = document.createElement("img")
   ,$favicon = document.createElement("link")

// Required for CORS
$gif.crossOrigin = "anonymous"

$gif.src = "https://i.imgur.com/v0oxdQ8.gif"

$favicon.rel = "icon"

// JS Fiddle always displays the result in an <iframe>,
// so we have to add the favicon to the parent window
window.parent.document.head.appendChild($favicon)

// libgif.js requires the GIF <img> tag to have a parent
$parent.appendChild($gif)

var supergif = new SuperGif({gif: $gif})
   ,$canvas

supergif.load(()=> {
  $canvas = supergif.get_canvas()
  updateFavicon()
})

function updateFavicon() {
  $favicon.href = $canvas.toDataURL()
  window.requestAnimationFrame(updateFavicon)
}

_{I used libgif.js to extract GIF frames.}

Unfortunately, the animation isn't very smooth in Chrome. In Firefox it works great, but Firefox already supports GIF favicons.

Check out also favico.js library.

See also

• How to add a browser tab icon (favicon) for a website?
• Changing website favicon dynamically

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 <link> href to that data-url.

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.

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

1. Download an image of each frame of the gif.

2. Link the first image as an icon with an id:

    <link rel="icon" type="image/png" href="/image1.png" id="icon"/>  
   

3. 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);  
    }
   

4. 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.

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):

<?xml version="1.0" encoding="UTF-8"?>
<svg width="280" height="260" version="1.1" viewBox="0 0 280 260" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="grad" x1="140" x2="140" y1="260" gradientUnits="userSpaceOnUse">
    <stop stop-color="#ffa00f" offset="0"/>
    <stop stop-color="#ffbe0f" offset="1"/>
  </linearGradient>
  <path d="m15 150c6.3913 2.885 20.753 8.8719 30 25 20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70c9.2467-16.128 23.609-22.115 30-25" fill="none" stroke="#aaa" stroke-linecap="round" stroke-width="30"/>
  <path d="m15 150c6.3913 2.885 20.753 8.8719 30 25 20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70l60-90c20-35 25-70-5-70s-25 35-5 70l60 90c20 35 25 70-5 70s-25-35-5-70c9.2467-16.128 23.609-22.115 30-25" fill="none" stroke="url(#grad)" stroke-linecap="round" stroke-width="30" stroke-dashoffset="1374" stroke-dasharray="1374">
    <animate id="anim1" attributeName="stroke-dashoffset" from="1374" to="0" dur="4s" fill="freeze" calcMode="spline" keyTimes="0; 1" keySplines=".42,0,.58,1" begin="0s; anim2.end"/>
    <animate id="anim2" attributeName="stroke-dashoffset" from="2748" to="1374" dur="4s" fill="freeze" calcMode="spline" keyTimes="0; 1" keySplines=".42,0,.58,1" begin="anim1.end + 8s"/>
  </path>
</svg>

And this is the result: