useFavicon.mdx

name	useFavicon
rank	43
tagline	Dynamically update the favicon with useFavicon.
sandboxId	usefavicon-xckn4k
previewHeight	200px
relatedHooks	usedocumenttitle

import CodePreview from "../../components/CodePreview.astro"; import HookDescription from "../../components/HookDescription.astro"; import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

The useFavicon hook is useful for dynamically updating the favicon (shortcut icon) of a web page. By using this hook, you can easily change the favicon by providing a new URL as a parameter. It creates a new link element with the specified URL, sets its type and relationship attributes appropriately, and appends it to the `` section of the document. Optionally, you can pass `{ temporary: true }` to automatically restore the original favicon when the component unmounts.

### Parameters

| Name | Type | Description | | ------- | ------ | -------------------------------------------------- | | url | string | The URL of the favicon to be set for the document. | | options | object | This is an optional configuration object provided when calling `useFavicon`. It currently accepts one property `temporary` which when set to `true`, will restore the original favicon on component unmount. |

import * as React from "react";
import { useFavicon } from "@uidotdev/usehooks";

export default function App() {
  const [favicon, setFavicon] = React.useState(
    "https://ui.dev/favicon/favicon-32x32.png"
  );

  useFavicon(favicon);

  return (
    <section>
      <h1>useFavicon</h1>

      <button
        title="Set the favicon to Bytes' logo"
        className="link"
        onClick={() =>
          setFavicon("https://bytes.dev/favicon/favicon-32x32.png")
        }
      >
        Bytes
      </button>
      <button
        title="Set the favicon to React Newsletter's logo"
        className="link"
        onClick={() =>
          setFavicon("https://reactnewsletter.com/favicon/favicon-32x32.png")
        }
      >
        React Newsletter
      </button>

      <button
        title="Set the favicon to uidotdev's logo"
        className="link"
        onClick={() => setFavicon("https://ui.dev/favicon/favicon-32x32.png")}
      >
        ui.dev
      </button>
    </section>
  );
}