在favicon轉換畫布

Question

我想知道如何使用不同的背景顏色製作動態單色圖標。 如何將canvas元素轉換爲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

可以使用toDataURL()提取帆布爲PNG，動態地將它設置爲頭 - 基於this answer由@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，您可能需要在設置新的（未測試）時刪除舊鏈接。