useFavicon

Gain control over your page favicon.

Installation

npx rabbithook@latest add use-favicon

Usage

App.tsx

import useFavicon from "@/hooks/use-favicon";

function Component() {
  const setFavicon = useFavicon();

  function handleChangeFavicon() {
    setFavicon("...path/to/favicon.ico");
  }

  return (
    <button onClick={handleChangeFavicon}>Change Favicon</button>
  )
}

Code

Typescript

use-favicon.ts

import { useEffect, useState } from "react";

function useFavicon() {
  const [href , setHref] = useState('');

  useEffect(() => {
    const link = document.querySelector("link[rel*='icon']") as HTMLLinkElement;
    if (link) {
      link.href = href;
    }
  },[href])

  return setHref;
}

export default useFavicon;

Javascript

use-favicon.js

import { useEffect, useState } from "react";

function useFavicon() {
  const [href , setHref] = useState('');

  useEffect(() => {
    const link = document.querySelector("link[rel*='icon']");
    if (link) {
      link.href = href;
    }
  },[href])

  return setHref;
}

export default useFavicon;