Dynamically Add App Badge To Favicon

add-favicon-app-badge.js

const faviconHref = document.querySelector('[rel="icon"]').href;
const faviconSize = 32;

const canvas = document.createElement('canvas');
canvas.width = faviconSize;
canvas.height = faviconSize;

const context = canvas.getContext('2d');
const img = document.createElement('img');

img.onload = () => {
  // Draw original favicon as background
  context.drawImage(img, 0, 0, faviconSize, faviconSize);

  // Draw notification circle
  context.beginPath();
  context.arc(
    canvas.width - faviconSize / 2.5,
    faviconSize / 2.5,
    faviconSize / 2.5,
    0,
    2 * Math.PI,
  );
  context.fillStyle = '#161b22';
  context.fill();

  // Draw notification number
  context.font = '18px "helvetica", sans-serif';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillStyle = '#FFFFFF';
  context.fillText('1', canvas.width - faviconSize / 2.5, faviconSize / 2.5);

  // Replace favicon
  const link = document.createElement('link');
  link.setAttribute('rel', 'icon');

  [...document.head.querySelectorAll('[rel~="icon"]')].forEach((element) =>
    document.head.removeChild(element),
  );

  link.href = canvas.toDataURL('image/png');
  document.head.appendChild(link);
};

img.crossOrigin = 'anonymous';
img.src = faviconHref;

screenshot.png

See full userscript here: https://github.com/karlhorky/dotfiles/blob/main/userscripts/github-favicon-notification-badge.user.js

And further discussion here: sindresorhus/notifier-for-github#235 (comment)