Dynamic Favicons: The Tiny Tab Icon That Can Tell You Things

Look at your open tabs: each one has a tiny icon next to its title. It’s called a favicon and, although it’s barely 16 pixels, it’s what we see most of a site when we have twenty tabs open. Almost every site uses it as a static logo. But it can also move and change.

What a dynamic favicon is

It’s a favicon that changes depending on what’s happening on the page. The best-known example is email: when a new message arrives, the icon shows a little number with your unread count. You find out without switching tabs.

Ideas for using it

• Notifications: a red dot when there’s a new message in the support chat.
• Status: a green icon when a process is done and a yellow one while it’s running, like uploading a file or generating a report.
• Timers: a clock ticking in the tab of a productivity tool.
• Personality: an icon that winks when you come back to the tab, or that changes with light or dark mode.

How it works, without jargon

The browser looks for the favicon in a tag in the page’s code. If JavaScript swaps that image for another, the tab updates instantly. The new image can be drawn on the fly, like the logo with a number on top, or picked from a few prepared ones.

Don’t forget the basics

Before thinking about animations, the favicon has to be done right: in every size different devices ask for (the tab, the phone home-screen shortcut, the app icon). That’s why I built a favicon generator into my portfolio’s tools, which creates every size from a single image.

In moderation

A favicon that blinks all the time gets tiring. The key is to change it only when it adds information. Used well, it’s one of the most discreet and effective ways to keep someone in the loop.