convert canvas in favicon

Question

I would like to know how to make a dynamic monocolor favicon with a different background color. How it's possible covert a canvas element to favicon?

var c=document.getElementById("favicon");
  c.width = 16;
  c.height = 16;

var context=c.getContext("2d");
  context.fillStyle = "<?php echo $color; ?>";
  context.fillRect(0, 0, 16, 16);
  context.fill();

Answer 1

You can extract the canvas as a PNG using toDataURL() and set it dynamically to head - based on this answer by @keparo (modified for this answer):

var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = c.toDataURL();
document.getElementsByTagName('head')[0].appendChild(link);

If you want to update the favicon several times during a page's existence you may have to remove the old link when setting a new (have not tested).