index.js

import React, { useEffect, useRef } from 'react';

const drawBox = (canvas, { background } = {}) => new Promise((resolve, reject) => {
  const { width, height } = canvas;
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    return null;
  }
  const drawBadge = () => {
    ctx.font = `${height * 0.6}px sans-serif`;
    ctx.textAlign = 'right';
    ctx.textBaseline = 'end';
    ctx.fillText('✅', width, height - (height * 0.1));
  };

  if (background) {
    const img = new Image();
    img.width = width;
    img.height = height;
    img.addEventListener('load', () => {
      ctx.drawImage(img, 0, 0, width, height);
      drawBadge();
      resolve(canvas.toDataURL('image/png'));
    });
    img.src = background;
    return true;
  }
  reject(new Error('No background specified'));
});

export default ({ width = 64, height = 64, count = 0 }) => {
  let isMounted = true;

  const favicon = window.document.querySelector('link[rel="icon"]');

  if (!favicon) {
    console.warn('⚠️ Tried to render <Favicon/> without a <link ... /> element.');
    isMounted = false;
    return null;
  }

  const { href: original } = favicon;

  const canvas = useRef();

  const handleRender = async () => {
    favicon.href = await drawBox(canvas.current, { 
      background: original,
    });
  };

  useEffect(() => {
    handleRender();
    return () => {
      isMounted = false;
    };
  });

  return (
    <>
      <canvas hidden width={width} height={height} ref={canvas} />
    </>
  );
};