Changing the Favicon while a tab is inactive

Posted: Reading Time:

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 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 :( . 

To help convey it further, here's a video of it in action during early beta: 

If you need help making something cute, I'd love to partner with you on something just like this.

Go to the Home Page

Hey there,

I’m a creative designer, developer, and leader obsessed with solving complex problems

Check this Nerd Out!

Go to the Resume Page


Experience & Accolades

Over ten years and going strong

Go to the About Page

About Me

Bios & Photos

A story to rival the Star Wars universe

Go to the Professional Work Page

Pro Work

Case Studies

Go to the Blog Page




Go to the Contact Page


Social & Contact Form

Slide into my DMs :)

Go to the Non-Profit Work Page

Non-Profit Work

Case Studies

Go to the Activity Page




Go to the For-Fun Page

For Fun

Case Studies