useFavicon

React side-effect hook sets the favicon of the page

Usage

Live Editor

function Demo() {
  const logo = 'https://react.dev/favicon.ico';
  const twitter = 'https://twitter.com/favicon.ico';
  const [icon, setIcon] = useState(twitter);
  useFavicon(icon);
  return (
    <div>
      <p>Change Favicon to</p>
      <button
        onClick={() => {
          setIcon(logo);
        }}
      >
        React
      </button>
      <button
        onClick={() => {
          setIcon(twitter);
        }}
      >
        Twitter
      </button>
    </div>
  );
};

Result

Loading...

API

useFavicon

Returns

void

Arguments

Argument	Description	Type	DefaultValue
href	icon href	string (Required)	-
baseUrl	base url	string | undefined	-
rel	set rel attribute to link element	string | undefined	icon