Streaming live at 10am (PST)

Animated favicon? (With cross-browser support)

Hey all,

I’m curious if anyone has successfully implemented an animated favicon with some javascript?

I was recently checking out this beautiful site: https://www.davidwilliambaum.com/

After some digging around, I can’t seem to find much info on this…

Cheers :blush:


Here is my public share link: LINK
(how to access public share link)

I found a solution to this if anyone is interested in the future…

Step 1

Split the animated gif into individual frames and host these elsewhere. The naming convention needs to be [name][sequence #].png. For example, “fav-icon-seq0.png”, “fav-icon-seq1.png”, “fav-icon-seq2.png”, “fav-icon-seq3.png”…

Note: I wasn’t able to host these images in Webflow’s asset manager because Webflow’s CDN adds unique characters to the URL that mess up the URL sequence. There’s probably a way to do this but I couldn’t figure it out.

Step 2

In the project settings > custom code, add the below code to the header section. Replace the URL with the URL of your first frame of your animation:

<link id="favicon" rel="shortcut icon" href="https://personal-site-favicon.s3-ap-southeast-2.amazonaws.com/fav-icon-seq0.png" type="image/x-icon">

Step 3

Add code before body tag in the project settings custom code. Again, replace the URL with your image path, but remove the image sequence number. You’ll also need to change the favicon index (4) to the number of frames in your animation.

<script>
window.onload = function() {
 var faviconIndex = 0;
 var favicon = document.getElementById('favicon')
‍
 setInterval(function() {
         favicon.href = 'https://personal-site-favicon.s3-ap-southeast-2.amazonaws.com/fav-icon-seq' + faviconIndex + ".png";
         faviconIndex++;
         faviconIndex %= 4;
   }, 1000);
};
</script>

Step 4

Change the 1000 ms to the frame rate you need.

Step 5

Publish the site to implement.