81

How to animate a favicon like that?

animated favicon

It seems to work only in Firefox.

0

7 Answers 7

62

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.

4
  • Is it possible to let the .gif only loop once? Commented Aug 14, 2017 at 14:28
  • 3
    Isn't it possible to manually change the icon via javascript? If this is the case, couldn't we animate the icon through a tedious frame by frame custom built animation?
    – Jacob
    Commented Dec 28, 2017 at 20:08
  • FWIW, as of Safari 12 (with "Show tab icons" set in prefs) it works there as well
    – Steve
    Commented Jan 7, 2019 at 20:20
  • The animated favicon isn't working on the website for me. Using Firefox 116
    – hf02
    Commented Aug 24, 2023 at 16:23
40

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.

2
  • 1
    Worked for me in Chrome, too. Commented May 9, 2017 at 6:16
  • 2
    There are browser limitations that don't allow to run this animation when tab is not in focus, the solution is to implement timer using web worker, I did just that in this small library npmjs.com/package/favloader you can check the source code, it's just setInterval function recreated using web worker + canvas animation + swap canvas DataURI in favicon link element.
    – jcubic
    Commented Dec 24, 2018 at 8:53
21

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

0
7

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.

1
  • Now looking back, there are probably better ways to pass it through a function in order to loop it, but this and similar methods will work in all browsers nonetheless.
    – Malmadork
    Commented Sep 3, 2019 at 22:12
6

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.

4

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

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:

Example animated SVG

Not the answer you're looking for? Browse other questions tagged or ask your own question.