vincentorback/setFaviconColor.js

## setFaviconColor.js
/* global define, Image */

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], function () {
      return factory()
    })
  } else if (typeof exports === 'object') {
    module.exports = factory()
  } else {
    root.FaviconColor = factory()
  }
})(this, function () {
  'use strict'

  /**
   * Public API
   * @type {Object}
   */
  var FaviconColor = {}

  var setColor = function (color) {
    if (!FaviconColor.loaded) {
      console.log('favicon not loaded yet')
      return
    }
    var context = FaviconColor.canvas.getContext('2d')
    context.fillStyle = color || FaviconColor.options.color
    context.fillRect(0, 0, FaviconColor.options.size, FaviconColor.options.size)
    // context.fill() // This breaks firefox
    FaviconColor.link.setAttribute('href', FaviconColor.canvas.toDataURL())
  }

  /**
   * init
   * @param  {Object} options
   * @return {Object}
   */
  FaviconColor.init = function (options) {
    if (!options.color) {
      return
    }

    FaviconColor.options = options
    var canvas = FaviconColor.canvas = document.createElement('canvas')
    var link = FaviconColor.link = document.querySelector("link[rel~='icon']")

    if (!link) {
      link = document.createElement('link')
      link.setAttribute('rel', 'shortcut icon')
      document.head.appendChild(link)
    } else {
      var linkClone = link.cloneNode(true)
      link = link.parentNode.appendChild(linkClone)
      link = linkClone
      linkClone.setAttribute('href', options.image)
    }

    function onImageLoaded () {
      canvas.width = options.size
      canvas.height = options.size
      var context = canvas.getContext('2d')
      context.drawImage(img, 0, 0)
      context.globalCompositeOperation = 'source-in'
      FaviconColor.loaded = true
      setColor(options.color)
      link.rel = 'image/x-icon'
    }

    var imageUrl = options.image ? options.image : link.getAttribute('href')
    var img = new Image()
    img.setAttribute('crossOrigin', 'anonymous')
    img.addEventListener('load', onImageLoaded)
    img.src = imageUrl
  }

  FaviconColor.setColor = setColor

  return FaviconColor
})

## smaller-version.js
function onImageLoaded () {
  var canvas = document.createElement('canvas')
  canvas.width = size
  canvas.height = size

  var context = canvas.getContext('2d')
  context.drawImage(img, 0, 0)
  context.globalCompositeOperation = 'source-in'
  context.fillStyle = color
  context.fillRect(0, 0, size, size)
  context.fill()

  el.type = 'image/x-icon'
  el.href = canvas.toDataURL()
}

var el = document.querySelector("link[rel~='icon']")
var size = 16
var imageUrl = '/path/to/image.jpg'
var color = '#f00'
var img = document.createElement('img')

img.addEventListener('load', onImageLoaded)
img.src = imageUrl || el.href

## test.html
<!DOCTYPE html>
<html>
<head>
  <title>Favicon Color</title>
  <link rel="icon" href="favicon.ico">
</head>
<body>

  <script src="setFaviconColor.js"></script>
  <script>
    function randomHex () {
      return '#' + Math.floor(Math.random() * 16777215).toString(16)
    }

    var FaviconColor = window.FaviconColor

    FaviconColor.init({
      color: 'blue',
      size: 16,
      image: 'play.svg'
    })

    setInterval(function () {
      FaviconColor.setColor(randomHex())
    }, 300)
  </script>
</body>
</html>
	/* global define, Image */

	(function (root, factory) {
	if (typeof define === 'function' && define.amd) {
	define([], function () {
	return factory()
	})
	} else if (typeof exports === 'object') {
	module.exports = factory()
	} else {
	root.FaviconColor = factory()
	}
	})(this, function () {
	'use strict'

	/**
	* Public API
	* @type {Object}
	*/
	var FaviconColor = {}

	var setColor = function (color) {
	if (!FaviconColor.loaded) {
	console.log('favicon not loaded yet')
	return
	}
	var context = FaviconColor.canvas.getContext('2d')
	context.fillStyle = color \|\| FaviconColor.options.color
	context.fillRect(0, 0, FaviconColor.options.size, FaviconColor.options.size)
	// context.fill() // This breaks firefox
	FaviconColor.link.setAttribute('href', FaviconColor.canvas.toDataURL())
	}

	/**
	* init
	* @param {Object} options
	* @return {Object}
	*/
	FaviconColor.init = function (options) {
	if (!options.color) {
	return
	}

	FaviconColor.options = options
	var canvas = FaviconColor.canvas = document.createElement('canvas')
	var link = FaviconColor.link = document.querySelector("link[rel~='icon']")

	if (!link) {
	link = document.createElement('link')
	link.setAttribute('rel', 'shortcut icon')
	document.head.appendChild(link)
	} else {
	var linkClone = link.cloneNode(true)
	link = link.parentNode.appendChild(linkClone)
	link = linkClone
	linkClone.setAttribute('href', options.image)
	}

	function onImageLoaded () {
	canvas.width = options.size
	canvas.height = options.size
	var context = canvas.getContext('2d')
	context.drawImage(img, 0, 0)
	context.globalCompositeOperation = 'source-in'
	FaviconColor.loaded = true
	setColor(options.color)
	link.rel = 'image/x-icon'
	}

	var imageUrl = options.image ? options.image : link.getAttribute('href')
	var img = new Image()
	img.setAttribute('crossOrigin', 'anonymous')
	img.addEventListener('load', onImageLoaded)
	img.src = imageUrl
	}

	FaviconColor.setColor = setColor

	return FaviconColor
	})
	function onImageLoaded () {
	var canvas = document.createElement('canvas')
	canvas.width = size
	canvas.height = size

	var context = canvas.getContext('2d')
	context.drawImage(img, 0, 0)
	context.globalCompositeOperation = 'source-in'
	context.fillStyle = color
	context.fillRect(0, 0, size, size)
	context.fill()

	el.type = 'image/x-icon'
	el.href = canvas.toDataURL()
	}

	var el = document.querySelector("link[rel~='icon']")
	var size = 16
	var imageUrl = '/path/to/image.jpg'
	var color = '#f00'
	var img = document.createElement('img')

	img.addEventListener('load', onImageLoaded)
	img.src = imageUrl \|\| el.href
	<!DOCTYPE html>
	<html>
	<head>
	<title>Favicon Color</title>
	<link rel="icon" href="favicon.ico">
	</head>
	<body>

	<script src="setFaviconColor.js"></script>
	<script>
	function randomHex () {
	return '#' + Math.floor(Math.random() * 16777215).toString(16)
	}

	var FaviconColor = window.FaviconColor

	FaviconColor.init({
	color: 'blue',
	size: 16,
	image: 'play.svg'
	})

	setInterval(function () {
	FaviconColor.setColor(randomHex())
	}, 300)
	</script>
	</body>
	</html>