useFavicon

Dynamically update the favicon.

Browser

API Reference

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useFavicon } from "@shak-hooks/usehooks";

Source: packages/react/src/useFavicon.ts

signature.ts

export function useFavicon(href: string)

Name	Type	Optional	Default
href	string	No	-

unknown

use-favicon.ts

1import { useEffect } from "react";

3export function useFavicon(href: string) {

4 useEffect(() => {

5 const link: HTMLLinkElement =

6 document.querySelector("link[rel*='icon']") ||

7 document.createElement("link");

8 link.type = "image/x-icon";

9 link.rel = "shortcut icon";

10 link.href = href;

11 document.getElementsByTagName("head")[0].appendChild(link);

12 }, [href]);

13}

Google Ads

example.tsx

1import { useFavicon } from "@shak-hooks/usehooks";

3const result = useFavicon("...");

4// result: unknown

5// Use values directly (React state).