useFavicon()

The useFavicon() hook allows you to programmatically change the browser tab icon (favicon). It automatically restores the original favicon when the component unmounts.

Import

typescript

import { useFavicon } from 'the-react-hooks';

Usage

Check your browser tab! 👆

Click the buttons below to dynamically change the browser tab icon.

Component.tsx

import { useFavicon } from 'the-react-hooks';
import { useState } from 'react';

export const Component = () => {
  const [url, setUrl] = useState('/favicon-red.ico');
  
  useFavicon(url);

  return (
    <div>
      <button onClick={() => setUrl('/favicon-red.ico')}>
        Red Icon
      </button>
      <button onClick={() => setUrl('/favicon-blue.ico')}>
        Blue Icon
      </button>
    </div>
  );
}

API

Arguments

href – string The URL or Data URI of the new favicon image.

Returns

This hook returns void.

PrevioususeEventListener NextuseFetch