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

Answer 2

You should be able to grab the favicon w/ document.querySelector("link[rel~='icon']") .

Then, this article on CSS tricks should help you achieve the result you wish.

Answer 3

Great question, I'd like to toggle my favicon depending on the dark/light mode in Vue2 with Vuetify application.

Hence path to favicon is static in index.html in Vue I think there is way around messing with index.html by selectors or CSS.

The most elegant way of doing it is using VueUse!

The link in the correct answer above by Sebastian Wrzalek is broken please use this link for VueUse reference

https://vueuse.org/core/usefavicon/