动态更改网站图标

javascript dom html favicon

2022-08-29 23:18:23

我有一个 Web 应用程序，该应用程序根据当前登录的用户进行品牌化。我想将页面的图标更改为自有品牌的徽标，但我找不到任何代码或任何如何执行此操作的示例。以前有人成功做到这一点吗？

我正在想象一个文件夹中有十几个图标，并且对要使用的favicon.ico文件的引用只是与HTML页面一起动态生成的。思潮？

答案 1

为什么不呢？

var link = document.querySelector("link[rel~='icon']");
if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.getElementsByTagName('head')[0].appendChild(link);
}
link.href = 'https://stackoverflow.com/favicon.ico';

答案 2

这里有一些在Firefox，Opera和Chrome中有效的代码（与这里发布的其他答案不同）。下面是一个不同的代码演示，也适用于 IE11。以下示例可能不适用于 Safari 或 Internet Explorer。

/*!
 * Dynamically changing favicons with JavaScript
 * Works in all A-grade browsers except Safari and Internet Explorer
 * Demo: http://mathiasbynens.be/demo/dynamic-favicons
 */

// HTML5™, baby! http://mathiasbynens.be/notes/document-head
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);
}

然后，您将按如下方式使用它：

var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
 changeFavicon('http://www.google.com/favicon.ico');
};

分叉或观看演示。