Changing the Favicon while a tab is inactive

Posted: July 8th 2020 Reading Time: ~3 minutes

While building my portfolio, one of my design principles was to have fun with all aspects of the process and environment. One piece of the web that I think is often under utilized is the favicon and title in the main browser tab. I love when favicons show a little alert icon or the title updates (while appropriate!) to tell me there are new updates.

While my portfolio site definitely isn't on the verge of life and death for the viewers looking at my site, I still wanted to have fun with it. I leveraged zzz.dog pretty heavily as my animation library, and I really fell in love with the 3D version of myself.

I thought it would be pretty cute if I could leverage my face on the homepage and 404 page to show the user what I thought about their site visit. While they were active on the site, I'm super joyful, and when they're not, be a little solemn.

To do this I leveraged blur events on the main window. If I detected that the current tab was blurred, I swapped out my current favicon for a sad one :( .

$(window).on("blur focus", function(e) {
      var prevType = $(this).data("prevType");
      if (prevType != e.type) {
        switch (e.type) {
          case "blur":
            $('head link[rel="icon"]').attr('href', '/favicon-inactive.png'); // change this to the path of your inactive icon
            break;
          case "focus":
            $('head link[rel="icon"]').attr('href', '/favicon.png'); // change this to the path of your main icon
            break;
        }
      }
      $(this).data("prevType", e.type);
    });