DEV Community

Cover image for Favicon Fun - Dynamically Updating Your Site Icon with ReactJS
Renaissance Engineer
Renaissance Engineer

Posted on

Favicon Fun - Dynamically Updating Your Site Icon with ReactJS

Want to make your website or app standout? One way could be what I cover in the video below, using Javascript to dynamically edit your website's favicon based on the state of your application.

How can I use this

The most obvious is to notify users of interactions on your site. For example, if you have a chat app, you could dynamically adjust the favicon to show users they have a message waiting even if they are in another tab.

A more advanced example would be swapping through an array of images to create an animation effect similar to a gif. I will be covering that in a future tutorial so be sure to subscribe

Top comments (4)

Collapse
 
dance2die profile image
Sung M. Kim • Edited

This was real fun to watch as favicon is the "face" of the web page.

Collapse
 
renaissanceengineer profile image
Renaissance Engineer

Glad you enjoyed it, I've seen a few websites do stuff with their favicons so I looked further into it and figured some other people might be interested as well

Collapse
 
dance2die profile image
Sung M. Kim

I was surely interested and thank you for sharing~

Collapse
 
valeriopisapia profile image
Valerio

Good tips! Thanks, mate.