1---
2category: Browser
3---
4 
5# useFavicon
6 
7Reactive favicon
8 
9## Usage
10 
11```ts {3}
12import { useFavicon } from '@vueuse/core'
13 
14const icon = useFavicon()
15 
16icon.value = 'dark.png' // change current icon
17```
18 
19### Passing a source ref
20 
21You can pass a `ref` to it, changes from of the source ref will be reflected to your favicon automatically.
22 
23```ts {7}
24import { useFavicon, usePreferredDark } from '@vueuse/core'
25import { computed } from 'vue'
26 
27const isDark = usePreferredDark()
28const favicon = computed(() => isDark.value ? 'dark.png' : 'light.png')
29 
30useFavicon(favicon)
31```
32 
33When a source ref is passed, the return ref will be identical to the source ref
34 
35```ts
36import { useFavicon } from '@vueuse/core'
37// ---cut---
38const source = shallowRef('icon.png')
39const icon = useFavicon(source)
40 
41console.log(icon === source) // true
42```
43 
44## Type Declarations
45 
46```ts
47export interface UseFaviconOptions extends ConfigurableDocument {
48  baseUrl?: string
49  rel?: string
50}
51export type UseFaviconReturn =
52  | ComputedRef<string | null | undefined>
53  | Ref<string | null | undefined>
54/**
55 * Reactive favicon.
56 *
57 * @see https://vueuse.org/useFavicon
58 * @param newIcon
59 * @param options
60 */
61export declare function useFavicon(
62  newIcon: ReadonlyRefOrGetter<string | null | undefined>,
63  options?: UseFaviconOptions,
64): ComputedRef<string | null | undefined>
65export declare function useFavicon(
66  newIcon?: MaybeRef<string | null | undefined>,
67  options?: UseFaviconOptions,
68): Ref<string | null | undefined>
69```
70