Animated favicon? (With cross-browser support)

Design help Animations & Interactions
1

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)

2

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.

3

Hey @jordanphughes,

Implemented this exactly as you outline here, doesn’t appear to be working.

Is this still working for you? Did you remove the favicon from the Webflow interface as well?

Thanks!

p.s. Great job with Untitled UI, very clean and fantastic website.

4

Hey guys, if anyone is still looking for a solution for animated favicons native in Webflow, here you go. This solution works on all browsers except Safari.

Step 1: Upload your animation frames as split individual PNG files into your Webflow asset manager. (if you are using a GIF, split the GIF into individual PNG frames then upload.)

Step 2: Locate and get the unique URL for each of the PNG files. (Asset manager > Hover over image > Gear icon > External icon (will open image in new tab) > Copy entire URL string)

Step 3: Paste the below code into the before body tag in your project settings:

<script>
var favicon_images = [
                    'https://uploads-ssl.webflow.com/64eb40b72c63785046c8638a/655187e52950cf2d2ffbd867_icon-t.png',
                    'https://uploads-ssl.webflow.com/64eb40b72c63785046c8638a/6551884e09318e5ad37c7766_icon-j.png',
                    'https://uploads-ssl.webflow.com/64eb40b72c63785046c8638a/6551884e99137cd616b7099e_icon-v.png'
                ],
    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++;
}, 1000);
</script>

Step 4: Replace the favicon images in the custom code with your own, and make sure they’re in order.

Step 5: Change the animation speed using the number underneath the image counter (It’s 1000(ms) in this example.)

Then, publish your site and view the results! :slight_smile:

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