Skip to content

useFavicon ​

Category
Export Size
362 B
Last Changed
5 months ago

Reactive favicon

Demo ​

Change favicon to

Usage ​

js
import { useFavicon } from '@vueuse/core'

const icon = useFavicon()

icon.value = 'dark.png' // change current icon

Passing a source ref ​

You can pass a ref to it, changes from of the source ref will be reflected to your favicon automatically.

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

const isDark = usePreferredDark()
const favicon = computed(() => isDark.value ? 'dark.png' : 'light.png')

useFavicon(favicon)

When a source ref is passed, the return ref will be identical to the source ref

ts
const source = ref('icon.png')
const icon = useFavicon(source)

console.log(icon === source) // true

Type Declarations ​

typescript
export interface UseFaviconOptions extends ConfigurableDocument {
  baseUrl?: string
  rel?: string
}
/**
 * Reactive favicon.
 *
 * @see https://vueuse.org/useFavicon
 * @param newIcon
 * @param options
 */
export declare function useFavicon(
  newIcon: ReadonlyRefOrGetter<string | null | undefined>,
  options?: UseFaviconOptions,
): ComputedRef<string | null | undefined>
export declare function useFavicon(
  newIcon?: MaybeRef<string | null | undefined>,
  options?: UseFaviconOptions,
): Ref<string | null | undefined>
export type UseFaviconReturn = ReturnType<typeof useFavicon>

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Antério Vieira
babu-ch
azaleta
Mikhailov Nikita
Jelf
Alex Kozack

Changelog ​

v10.5.0 on 10/7/2023
d1fcc - feat: Add link tag if it doesn't exist (#3444)
v10.0.0-beta.5 on 4/13/2023
cb644 - refactor!: remove isFunction and isString utils
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
10e98 - feat(toRef)!: rename resolveRef to toRef
v9.2.0 on 9/5/2022
df718 - fix: improve type overload (#2123)
v9.1.0 on 8/4/2022
06e26 - fix: writable return type (#2036)
v8.9.3 on 7/14/2022
99e07 - fix!: rename type FaviconOptions to UseFaviconOptions (#1865)

Released under the MIT License.