首页 > 解决方案 > 您如何制作书签更改页面图标?

问题描述

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

这是我现在拥有的代码:

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">);

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

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

标签: javascriptfaviconbookmarklet

解决方案


查看此要点演示

//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);
}

推荐阅读