Favicon / tab notifications in react

Question

I'd like to add notifications to my favicon when my window tab is blurred. I'm using react and material ui (using typescript).

I could imagine that it is a very common use case but I can't seem to find an easy solution out there. Any suggestions?

Answer 1

Can you create a version of your icon that contains a notification indicator and then change the favicon using:

document.querySelector("link[rel*='icon']").href = "favicon.ico"; ?