Function to generate colored squared favicons. A color is provided and it will make a square with that color with a black border of 2px. Then it will insert the favicon into the document.

generate_favicon.js

generate_favicon = function(color)
{
	let canvas = document.createElement("canvas")

	canvas.height = 256
	canvas.width = 256

	let context = canvas.getContext("2d")
	let center = canvas.height / 2
	let side = 192
	let side2 = 194

	context.fillStyle = "rgb(16,16,16)"
	context.fillRect(center - (side2 / 2), center - (side2 / 2), side2, side2)
	context.fillStyle = color
	context.fillRect(center - (side / 2), center - (side / 2), side, side)

	let link = document.querySelector("link[rel*='icon']") || document.createElement('link')

	link.type = 'image/x-icon'
	link.rel = 'shortcut icon'
	link.href = canvas.toDataURL()

	document.getElementsByTagName('head')[0].appendChild(link)
}