Guide
Reference
Roadmap
Guide
Reference
Roadmap

useFavicon

Tags:
Browser

A React Hook that allows you to change the favicon of the page.

Demo

Sourceicon
Favicon:

Usage

See API for more details.

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const [favicon, actions] = useFavicon(iconLink, options)

IconLink

string | null | undefined, the URL of the favicon (or path if baseUrl is set).

Options

export type UseFaviconOptions = { /** * Base URL for the favicon * * @defaultValue '' */ baseUrl?: string /** * The rel attribute of the favicon link element * * @defaultValue 'icon' */ rel?: string /** * Sync the favicon in document `<link rel='icon' />` to hooks state on mount * * @defaultValue true */ syncOnMount?: boolean /** * Restore the previous favicon on unmount * * @defaultValue false */ restoreOnUnmount?: boolean }

Returns

export interface UseFaviconReturns { /** * The current favicon URL */ href: string | null /** * Set the favicon URL */ setFavicon: ReactSetState<string | null> /** * Sync the favicon in document `<link rel='icon' />` to hooks state */ syncFavicon(isInitial?: boolean): void /** * Set the favicon to an emoji */ setEmojiFavicon: (emoji: string) => void /** * Set the favicon to the previous favicon */ setPreviousFavicon(): void }