Vue 通过 VueUse 的 useFavicon 设置浏览器窗口icon图标

Vue 通过VueUse的useFavicon设置浏览器窗口icon图标。

代码示例

import { useFavicon } from '@vueuse/core'

const icon = useFavicon()
//设置浏览器窗口图标
icon.value = 'dark.png'
//你也可以直接设置图标的URL地址
icon.value = 'https://www.itxst.com/img/favicon.ico'

你可以传递一个ref对象给它，当ref对象变化会自动设置浏览器图标。

import { computed } from 'vue'
import { useFavicon, usePreferredDark } from '@vueuse/core'

const isDark = usePreferredDark()
const favicon = computed(() => isDark.value ? 'dark.png' : 'light.png')
//favicon变化，窗口图标也会变
useFavicon(favicon)

传递一个ref对象给它，返回的对象也和ref对象相同。

const source = ref('icon.png')
const icon = useFavicon(source)
//console => true
console.log(icon === source)

在线例子

例子