Docs
useFavicon

Dynamically update the favicon with useFavicon.

Loading...

Installation

pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-favicon

Usage

"use client"
 
import * as React from "react"
 
import { useFavicon } from "@/hooks/use-favicon"
 
export function Component() {
  const [darkMode, setDarkMode] = React.useState(false)
 
  try {
    useFavicon(
      darkMode
        ? "/dark-mode-favicon.ico" // Valid image URL
        : "/light-mode-favicon.ico" // Valid image URL
    )
  } catch (error) {
    console.error(error.message)
  }
 
  return (
    <button onClick={() => setDarkMode(!darkMode)}>Toggle Dark Mode</button>
  )
}

Error Handling

If an invalid URL is passed, the hook will throw an error:

function InvalidFaviconExample() {
  try {
    useFavicon("https://example.com/invalid-image-url.png") // Invalid URL
  } catch (error) {
    console.error(error.message) // Logs: "Invalid favicon URL: https://example.com/invalid-image-url.png is not a valid image."
  }
 
  return <div>Invalid Favicon Example</div>
}

API Reference

Parameters

NameTypeDescriptionDefault ValueOptional
urlstringThe URL of the favicon. Must point to a valid image.-No
useEventListeneruseFetch