我有一个 Web 应用程序，根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的徽标，但我找不到任何代码或任何示例去做这个。有没有人成功地做到过这一点？
我正在想象一个文件夹中有十几个图标，并且对要使用的 favicon.ico 文件的引用是随 HTML 页面一起动态生成的。想法？
动态更改网站图标
IT技术
javascript
html
dom
favicon
2021-02-07 12:52:30
6个回答
为什么不？
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';
这是一些适用于 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');
};
如果您有以下 HTML 代码段：
<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />
例如，您可以通过更改此链接上的 HREF 元素来使用 Javascript 更改网站图标（假设您使用的是 JQuery）：
$("#favicon").attr("href","favicon2.png");
您还可以创建一个 Canvas 元素并将 HREF 设置为画布的 ToDataURL()，就像Favicon Defender所做的那样。
jQuery 版本：
$("link[rel='shortcut icon']").attr("href", "favicon.ico");
甚至更好：
$("link[rel*='icon']").attr("href", "favicon.ico");
香草JS版本：
document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";
document.querySelector("link[rel*='icon']").href = "favicon.ico";
更现代的方法：
const changeFavicon = link => {
let $favicon = document.querySelector('link[rel="icon"]')
// If a <link rel="icon"> element already exists,
// change its href to the given link.
if ($favicon !== null) {
$favicon.href = link
// Otherwise, create a new element and append it to <head>.
} else {
$favicon = document.createElement("link")
$favicon.rel = "icon"
$favicon.href = link
document.head.appendChild($favicon)
}
}
然后你可以像这样使用它：
changeFavicon("http://www.stackoverflow.com/favicon.ico")