Skip to content

How to Change Favicon on Tab Switching Using JavaScript

Dynamically change favicon on tab switching using JavaScript

In this post, you’re going to learn step-by-step how to change the favicon on tab switching using plain JavaScript.

We’re going to implement it so that the favicon changes to a grayscale version of the original favicon when the tab is inactive and changes back to the original favicon when the tab is active.

active browser tab
[Active browser tab]
Inactive browser tab
[Inactive browser tab]


We’re going to use 2 favicons to do the trick.


The default favicon will be used when the browser tab is being focused and the other one when it is not.

I named the two favicons favicon.ico respectively favicon-inactive.ico. You can name them, however you’d like, but don’t forget to update the code accordingly.


Here is the code:

First, we grab the favicon element as we will be updating it when the tab loses focus.

Then we listen to the visibilitychange event to know when the user switched tabs.

Finally, we append the -inactive string to the favicon‘s name if the user switched tabs.

🎥 Check out this video for a showcase of this functionality:


That’s all! 🎉

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.