Dynamic 在favicon中转换画布

我想知道如何用不同的背景色制作一个动态单色favicon。 如何将画布元素隐藏到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();

---

您可以使用toDataURL将画布提取为PNG，并将其动态设置为head-基于@keparo修改此答案：

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

如果您想在页面存在期间多次更新favicon，您可能需要在设置新的未测试页面时删除旧链接