Docs
Favicon

Favicon

Dynamically update the favicon.

About

The useFavicon hook is useful for dynamically updating the favicon (shortcut icon) of a webpage. 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 correctly, and appends it to the <head> section of the document.

Parameters

NameTypeDescription
urlstringThe URL of the favicon to be set for the document.

Installation

Run the following command:

npx scriptkavi-hooks@latest add favicon

Usage

import { useFavicon } from "@/hooks/favicon"
import * as React from "react"
 
export default function App() {
  const [favicon, setFavicon] = React.useState(
    "https://hooks.scriptkavi.com/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 hooksdotscriptkavi's logo"
        className="link"
        onClick={() =>
          setFavicon("https://hooks.scriptkavi.com/favicon-32x32.png")
        }
      >
        hooks.scriptkavi.com
      </button>
    </section>
  )
}
Document TitleGeolocation