如何在VueJs中动态更改网站图标？

Question

我想做一个常见的技巧，即能够动态更改我的VueJs应用程序的favicon。

例如：我的应用程序中有一个在后台运行的计时器，我希望在计时器运行时更改favicon。

在VueJs中，由于favicon是在index.html文件中设置的，我真的不知道如何在应用程序的其他组件中修改它。？

我尝试过这种方法，但它没有起作用。

感谢您的帮助。

- Ousmane

Answer 1

这会有所帮助，这是一个非常棒的库，提供了Vue 2和3的实用工具。 VueUse useFavicon

- Sebastian Wrzalek

---

这个链接现在已经失效了，我们能否获得一个更新的链接呢？ - Riza Khan

Answer 2

你应该能够使用 document.querySelector("link[rel~='icon']") 抓取网站图标。

然后，CSS技巧中的这篇 article 文章应该可以帮助你实现所希望的结果。

- kissu

---

在我的Vue 2项目中有效。只需确保获取正确的 link[rel='XXX']，它可能与 link[rel='shortcut icon'] 或其他内容不同。或者更好的方法是使用kissu建议的 ~= 技巧（codepen示例没有 ~）。 - Herr_Hansen

Answer 3

好问题，我想在Vue2和Vuetify应用程序中根据深色/浅色模式切换我的网站图标。

因此，在Vue的index.html中，网站图标的路径是静态的，我认为有一种方法可以通过选择器或CSS来解决这个问题，而不必去修改index.html。

最优雅的方法是使用VueUse！

Sebastian Wrzalek在上面的正确答案中提供的链接已经失效，请使用此链接查看VueUse参考资料。

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

- Simon Klimek