Complete React Favicon Implementation Guide

// hooks/useFavicon.js
import { useEffect } from 'react';

export const useFavicon = (href) => {
  useEffect(() => {
    const link = document.querySelector("link[rel~='icon']") ||
                 document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'icon';
    link.href = href;
    
    if (!document.querySelector("link[rel~='icon']")) {
      document.head.appendChild(link);
    }
  }, [href]);
};

// Usage in component:
import { useFavicon } from './hooks/useFavicon';

function App() {
  const [hasNotifications, setHasNotifications] = useState(false);
  
  useFavicon(hasNotifications ? '/favicon-notification.ico' : '/favicon.ico');
  
  return <div>App Content</div>;
}

// utils/faviconBadge.js
export const drawFaviconBadge = (count) => {
  const favicon = document.querySelector("link[rel~='icon']");
  const img = document.createElement('img');
  img.src = favicon.href;
  
  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = 32;
    canvas.height = 32;
    const ctx = canvas.getContext('2d');
    
    // Draw original favicon
    ctx.drawImage(img, 0, 0, 32, 32);
    
    // Draw badge
    if (count > 0) {
      ctx.fillStyle = '#ff0000';
      ctx.beginPath();
      ctx.arc(24, 8, 8, 0, 2 * Math.PI);
      ctx.fill();
      
      ctx.fillStyle = '#ffffff';
      ctx.font = 'bold 10px Arial';
      ctx.textAlign = 'center';
      ctx.fillText(count > 9 ? '9+' : count, 24, 11);
    }
    
    favicon.href = canvas.toDataURL('image/png');
  };
};

// Usage:
useEffect(() => {
  drawFaviconBadge(unreadCount);
}, [unreadCount]);