I Put an Animated Favicon on a Client Site. Users Hated It Within 48 Hours.
A client asked me to add a pulsing notification dot to their favicon — the kind you see on WhatsApp Web or Slack. Seemed simple. Three days later they emailed asking me to remove it because three users had complained the tab was "distracting" and one had closed the browser thinking something was wrong with their computer.
I got curious and ran a small informal test: I asked 12 people to keep 5 browser tabs open for an afternoon, one of which had a subtle animated favicon (a slow color pulse). Eight people noticed it. Five found it annoying. Two closed the tab specifically because of it.
Animated favicons work in one very narrow situation. Pretty much everywhere else, they're a liability.
The Only Place Animated Favicons Win: Genuine Notifications
WhatsApp Web changes the favicon to show an unread count badge. Slack does a red dot. Gmail used to show unread count before they switched to the tab title approach. These work because the animation means something — there's a message waiting. The user's attention is the point.
The pattern that works:
- Animation starts when a notification arrives
- Animation stops when the user clicks the tab
- The static favicon is the default state
If your favicon is always animated — a spinning logo, a breathing effect, a color cycle — there's no "quiet" state. The user's peripheral vision never stops flagging that tab as "something is happening." That's what makes it exhausting.
Browser Support Is Surprisingly Good Now
You can use an animated GIF as a favicon in all major browsers. Chrome, Firefox, Edge, and even Safari all support it — Safari took until version 16 to stop showing only the first frame. There's also the newer approach of using JavaScript to swap the favicon <link> element dynamically, which gives you frame-rate control but adds a few KB of JS.
The GIF approach is simpler:
<link rel="icon" href="/favicon.gif" type="image/gif">
But GIF is limited to 256 colors and no alpha transparency. For a notification badge that overlays your existing icon, you need the JavaScript approach — render a canvas, composite the badge onto your icon, and update the favicon link. It's about 15 lines of code.
A tool I've used: genfavicon.org can generate both the static SVG/PNG/ICO set and an animated GIF version in one export. Select "Include animation" and pick a preset — pulse, badge, or spinner.
The Framework That Actually Works
If you're going to animate your favicon, follow these three rules that emerged from my testing:
- Animation only after a user-triggered event. Someone sent you a message, your upload finished, a timer ended. Never on page load.
- Restore the static icon when the tab gets focus. The animation served its purpose — the user clicked. Don't keep blinking.
- Subtle motion, not a rave. A slow pulse or a number badge. Nothing that rotates, flashes, or changes color faster than once per second.
I've seen sites use animated favicons as a branding gimmick — a spinning logo, a perpetual shimmer. Every single one got negative feedback. Users don't want a branded experience in their tab bar. They want to find the right tab and move on.
When I Recommend It vs When I Don't
Chat apps, email clients, project management tools — anything where a notification changes what the user should do next — an animated favicon makes sense. For a blog, a portfolio, an e-commerce site, or a SaaS dashboard where notifications already appear in-app, skip it.
My client ended up keeping the notification favicon but only for unread messages, and only after I rewired it to reset on tab focus. They haven't gotten a complaint since. The lesson wasn't "never animate." It was "only animate when there's something to say."
Written by David Kim — Frontend developer who tests UI details on actual humans before shipping. More about me →