---
title: Animated Favicons (GIF and JavaScript)
description: Some browsers animate a GIF favicon in the tab. Which support it, why sites use JavaScript for live status instead, and when to keep it static.
canonical: https://favicontools.com/glossary/animated-favicon
---

# Animated Favicons (GIF and JavaScript)

An animated favicon is usually an animated GIF used as the icon; Firefox and some Chromium builds play it in the tab, while Safari and others show only the first frame. Sites mainly use animation to signal live activity (a spinner, an unread count, a recording dot), often by swapping the icon from JavaScript rather than relying on a GIF. For a brand mark, a static icon is clearer and more widely supported.

## Support is uneven, so treat it as an enhancement

An animated GIF referenced as the favicon plays in Firefox and some Chromium builds, but Safari and several others render only the first frame. So animation can never be load-bearing: whatever the icon needs to say has to be legible in that first frame alone.

Because of that, most "animated" favicons in the wild aren't GIFs at all. They're a script redrawing the icon from a canvas and swapping the link tag's href: a spinner while something loads, a red dot while recording, or an unread count painted over the mark. That gives precise control and works through the same link-swap mechanism everywhere.

## The JavaScript route for live status

To show an unread badge or a status dot, draw each state onto a canvas, export it, and set the favicon link's href to the result. The browser updates the tab icon on the fly. This is how mail and chat apps put a number in the tab, and it degrades gracefully to a static icon where scripting is off.

> **Keep a legible first frame:** Since some clients only ever show frame one, an animated GIF favicon must still make sense frozen. If the first frame is blank or mid-transition, those users see nothing meaningful.

## Animated favicon FAQ

### Do animated favicons work in Chrome and Safari?

Support is inconsistent. Firefox animates GIF favicons, Chromium has been hit and miss, and Safari typically shows only the first frame. Never rely on the animation being seen.

### How do I show an unread count in the favicon?

Draw the icon plus the badge onto a canvas in JavaScript, then set the favicon link's href to the canvas output. Update it whenever the count changes. It's the same technique mail and chat apps use.

### Should I use an animated favicon?

For a brand mark, no. A static icon is clearer and universally supported. Reserve animation for genuine live status, and implement that with a JavaScript link swap rather than a GIF.