您如何制作书签更改页面图标？

Question

在我开始之前，这不是重复的。 为了解释我的目标，我想要一个书签，当点击它时，它会更改页面图标而不加载新标签。 其他类似的问题给你的书签一个图标，但没有达到我想要的。

这是我现在拥有的代码：

data:text/html; charset=utf-8, <html><link rel="shortcut icon" href="http://link-to-my-icon.info/favicon.ico"></html>

它有效，但它改变了我的标签。 我想保持标签打开，但编辑 HTML 以更改页面图标。 我试过使用

javascript: document.write(<link rel="shortcut icon" href="http://transparent-favicon.info/favicon.ico">);

也一样，但它绝对什么也没做，而我的第一次尝试至少改变了图标。

任何帮助将不胜感激，谢谢。

Answer 1

查看此要点和演示。

//source: https://gist.github.com/mathiasbynens/428626

document.head || (document.head = document.getElementsByTagName('head')[0]);

function changeFavicon(src) {
 var link = document.createElement('link'),
     oldLink = document.getElementById('dynamic-favicon');
 link.id = 'dynamic-favicon';
 link.rel = 'shortcut icon';
 link.href = src;
 if (oldLink) {
  document.head.removeChild(oldLink);
 }
 document.head.appendChild(link);
}