vue.js - How to change the favicon dynamically in VueJs

Question

I would like to do this very common trick that is to be able to change the favicon of my VueJs app dynamically.

For example : I have a timer in my app that is running in background and I would like to change the favicon when the timer is running.

In VueJs since the favicon is set in the index.html file I really don't know how could I do to be able to modify it in others component of my app. ?

I tried this approach but it did not work

Thanks for your help

Answer 1

This will help, it is awesome libary with utilities for Vue 2 and 3. VueUse useFavicon