useFavicon

A hook to dynamically update the page favicon.

Overview

useFavicon allows you to programmatically change the website's favicon. This is great for showing status indicators (like notifications) or themes directly in the browser tab.

Demo

Tab Presence

Favicon Switcher

Click buttons below and check your browser tab!

API Reference

function useFavicon(href: string): void

Parameters

Name	Type	Description
`href`	`string`	The URL or Data URI of the new favicon.

Usage Example

import { useFavicon } from 'react-hooks-ts'
 
function StatusIndicator({ hasNotifications }) {
  const icon = hasNotifications ? '/favicon-alert.ico' : '/favicon.ico'
  useFavicon(icon)
 
  return <div>Check the tab icon!</div>
}