Animated Favicons: How They Work and Browser Support (2026)

Animated favicons are tiny moving icons in the browser tab, and they’re very good at catching the eye. In 2007 we came across a blog whose favicon was a dancing animated GIF. Out of 15 open tabs, it was the one that kept pulling our attention. Here is how animated favicons work in 2026, which browsers support them, and when using one actually makes sense.

Quick answer: An animated favicon is a GIF (or a favicon swapped by JavaScript) that moves in the browser tab. Firefox animates GIF favicons natively, but Chrome, Edge and Safari show only the first frame. To animate a favicon in every major browser, change the icon with JavaScript, for example by drawing frames on a canvas. Use animation sparingly, for things like unread counts or progress, because constant motion annoys visitors.

What we saw in 2007

We had always assumed favicons had to be .ico files linked in the page head. Then we spotted a dancing figure in a Firefox tab while visiting a blog through a referrer link. The page source showed they had simply linked an animated GIF as the favicon. The GIF was a huge 183 KB (our own favicon was about 2 KB), so the frames took a while to load: the first frame appeared instantly and the dance started a few seconds later. Readers soon pointed out in the comments that image favicons like this didn’t work in Internet Explorer, so the safe choice back then was to stick with .ico icons.

Animated favicons: browser support in 2026

• Firefox: animates GIF favicons natively.
• Chrome and Edge: show only the first frame of a GIF favicon, so you need JavaScript to animate it.
• Safari: shows a static icon. Like Chrome, it needs JavaScript to change it.

Because support varies, most sites that use moving favicons today change the icon with JavaScript rather than relying on GIFs.

How to make an animated favicon

Option 1: Animated GIF (Firefox only)

Create a small looping GIF (16×16 or 32×32 pixels, as few frames as possible) and link it in the page head:

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

Keep a normal static favicon as well so other browsers have a good fallback. Keep the file tiny: a 183 KB favicon like the one we saw in 2007 wastes bandwidth on every page view.

Option 2: JavaScript (all modern browsers)

Draw each frame on a hidden canvas, convert it to a PNG data URL and update the favicon <link> element on a timer. This is how sites show live notification badges, unread message counts or upload progress in the tab. Browsers slow down timers in background tabs, so the animation may update less often when the tab isn’t focused.

Should you use an animated favicon?

Animation is attention-grabbing, which is exactly why it can backfire. A constantly moving icon is distracting and can feel spammy. Good uses include:

• Showing a new message or notification count.
• Indicating that a long task, upload or timer has finished.
• A short seasonal or event animation that stops after a few seconds.

For most sites, a crisp static favicon that looks good at small sizes and in dark mode is the better choice. Free tools like favicon.io and RealFaviconGenerator create the full set of icon sizes for you. See our guides on how to create a favicon online free and add a favicon to your site.

FAQ

Can a favicon be a GIF?

Yes. Browsers accept GIF favicons, but only Firefox animates them. Chrome, Edge and Safari display the first frame.

Do animated favicons work in Chrome?

Not as GIFs. In Chrome you need JavaScript that swaps the favicon image to create the animation.

What size should a favicon be?

Provide at least a 32×32 icon for browser tabs, plus larger PNG or SVG versions and a 180×180 Apple touch icon for phones and home screens.

Are animated favicons bad for SEO?

They don’t directly affect rankings, but large GIF files add page weight, and distracting motion can hurt the user experience.