tampermonkey/greasemonkey script that inverts favicons for use in dark desktop themes. Just have it run on sites you'd like to invert favicons for.

invert-favicon.js

(function () {
  const getFavicon = () => {
    return (
      document.querySelector('link[href*=".ico"]')
      || document.querySelector('link[href*=".png"]')
    )
  }

  const changeFavicon = async function () {
    const faviconEl = getFavicon()

    if (faviconEl.href.includes('data:')) {
      return
    }

    const img = new Image()

    img.crossOrigin = 'Anonymous'
    await new Promise((resolve) => {
      img.src = faviconEl.href
      img.onload = resolve
    })

    const canvas = document.createElement('canvas')
    //canvas.style.display = 'none'
    //document.body.appendChild(canvas)

    canvas.width = img.width
    canvas.height = img.height

    const ctx = canvas.getContext('2d')

    ctx.filter = 'invert(1) hue-rotate(180deg) saturate(2)'
    ctx.drawImage(img, 0, 0)
    const dataUrl = canvas.toDataURL()

    faviconEl.href = dataUrl
  }

  const favEl = getFavicon()
  const mo = new MutationObserver(changeFavicon)

  mo.observe(favEl, { attributes: true })

  changeFavicon()
})()