useFavicon

A hook that provides functionality to dynamically change the website’s favicon. Perfect for implementing theme-based favicons, notification indicators, or dynamic branding.

Parameters

This hook doesn’t take any parameters.

Returns

• faviconUrl: string | undefined - Current favicon URL
• changeFavicon: (newFavicon: string) => void - Function to update the favicon

Usage

import { useFavicon } from '@rhinolabs/react-hooks';

function ThemeFavicon() {
  const { faviconUrl, changeFavicon } = useFavicon();

  return (
    <div>
      <button onClick={() => changeFavicon('/light-favicon.ico')}>
        Light Theme Icon
      </button>

      <button onClick={() => changeFavicon('/dark-favicon.ico')}>
        Dark Theme Icon
      </button>

      <div>Current Favicon: {faviconUrl}</div>
    </div>
  );
}

Notes

• Automatically creates favicon link if missing
• Updates existing favicon element
• Maintains favicon state
• Handles link element creation
• Updates in real-time
• Supports all image formats
• Safe DOM manipulation
• Returns current favicon URL