invert-favicon.js

function invert() {
  // grab the favicon
  const icon = document.querySelector('link[rel*="icon"]');
  if (!icon) return;
  // make a canvas
  const canvas = document.createElement('canvas');
  canvas.width = 128;
  canvas.height = 128;
  document.body.append(canvas);
  const ctx = canvas.getContext('2d');
  const img = document.createElement('img');
  img.src = icon.href;
  document.body.append(img);
  img.addEventListener('load', () => {
    ctx.drawImage(img, 0, 0, 128, 128);
    // invert colours. MEH this doesn't look that good
    ctx.globalCompositeOperation = 'difference';
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    const data = canvas.toDataURL('image/png');
    icon.type = 'image/x-icon';
    icon.href = data;
  });
}

invert();