How to 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.

Setup

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.

Implementation

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! 🎉

Comments