Make the favicon gray

gravicon.js

/*
I wanted to turn my favicon gray on my development site, so I made this gist.
This is really useful for spotting which tab is which. 
*/
(() => {
  if (window.location.origin.indexOf("localhost") === -1) { return }
  const current = document.querySelector('link[rel*="icon"]')
  const img = document.createElement("img")
  img.onload = () => {
    const canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    const ctx = canvas.getContext("2d")
    ctx.drawImage(img, 0,0)

    const imageData = ctx.getImageData(0, 0, img.width, img.height);
    const d = imageData.data;

    for(let i = 0; i < d.length; i += 4) {
      d[i] = d[i+1] = d[i+2] = 0.34 * d[i] + 0.5 * d[i + 1] + 0.16 * d[i + 2];
    }

    // overwrite original image
    ctx.putImageData(imageData, 0,0)
    current.href = canvas.toDataURL()
  }
  img.src = current.href
})()