useFavicon

Tags:

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.

API

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

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
}