我有一个网络应用程序，根据当前登录的用户进行品牌定制。我想将页面的favicon更改为专属标签的Logo，但是我无法找到任何代码或任何如何实现这一点的示例。有人以前成功过吗？
我考虑在一个文件夹中放置十几个图标，并动态生成与HTML页面一起使用的favicon.ico文件的引用。您有什么想法？
我考虑在一个文件夹中放置十几个图标，并动态生成与HTML页面一起使用的favicon.ico文件的引用。您有什么想法？
动态更改网站图标
489
- rwmnau
5
61一个收藏夹图标里面有一款街机游戏。 - Corey Trager
19街机游戏的链接已更改。这个链接 是正确的。 - Basil
请参考https://dev59.com/9G015IYBdhLWcg3w9gfh，了解如何使用画布在模板图像上绘制以动态更新网站的favicon。 - handle
2已采纳答案中提供的代码示例存在一个小错误。由于我没有足够的声望分数来对答案进行评论，因此在这里写下来。
最后一行的括号位置颠倒了：}()); 应该改为 })();
如果更新代码示例，其他人复制和粘贴时就不会出现这个问题了。 - Goran W
4@CoreyTrager 网址已更改：http://www.p01.org/defender_of_the_favicon/。 - Clément
18个回答
578
为什么不呢？
var link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.head.appendChild(link);
}
link.href = 'https://stackoverflow.com/favicon.ico';
- keparo
11
2我认为这很接近我正在寻找的内容，但是我该如何从数据库中获取适当的HREF？我想我将不得不从JavaScript进行服务器查找，但我不希望它变得太复杂。谢谢您的提示。 - SqlRyan
40既然在IE中无效，您可以从
rel属性中删除shortcut。 [shortcut是IE专有的无效链接关系！]（http://mathiasbynens.be/notes/rel-shortcut-icon） - Mathias Bynens9您同样可以寻找现有的网站图标链接并更新或替换它。 - keparo
8谷歌可以通过使用此URL，将stackoverflow.com替换为您想要的域名，来提供网站的favicon：http://s2.googleusercontent.com/s2/favicons?domain=stackoverflow.com - kirb
7在Chrome的Javascript控制台中输入这个代码能起作用吗？我试过了，但无法用这种方式在不同的网站上改变收藏夹图标。 - powerj1984
显示剩余6条评论
105
以下代码适用于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');
};
- Mathias Bynens
10
Chrome bug已在Chrome 6（于9月10日发布）中得到修复，因此Chrome Hack不再必要——事实上，我强烈建议不要使用它，因为这会破坏前进按钮。 - josh3736
在Chrome 26/Win7中，演示对我不起作用。
document.head || document.head = document.getElementsByTagName('head')[0];
Uncaught ReferenceError: Invalid left-hand side in assignment。 - Patrick有没有任何原因，不能使用Base64编码的图像字符串作为源来运行这个？ - powerj1984
2这在所有当前支持的浏览器中都可以运行（IE 11、Edge、FF 和 Chrome），但无法在 Safari 上进行测试。 - Aaron
你的演示出了问题，很可能是因为使用了http而不是https连接到谷歌。 - mplungjan
显示剩余5条评论
57
如果您有以下HTML片段：
<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />
你可以使用 JavaScript 通过更改此链接上的 HREF 元素来更改网站的 favicon。例如（假设您正在使用 JQuery）：
$("#favicon").attr("href","favicon2.png");
你还可以创建一个Canvas元素，并将其HREF设置为Canvas的ToDataURL()，就像Favicon Defender一样。
- fserb
2
2我认为当 JS 运行时，浏览器已经看到了链接并尝试加载
favicon.png。这可能需要通过服务器端完成。 - cHao2如果您不使用JQuery，可以使用
document.getElementById('favicon').setAttribute('href','favicon2.png')更改#favicon的href属性。或许您可以将其添加到您的帖子中@fserb？ - johannchopin47
jQuery 版本：
$("link[rel='shortcut icon']").attr("href", "favicon.ico");
或者更好的是：
$("link[rel*='icon']").attr("href", "favicon.ico");
原生 JavaScript 版本：
document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";
document.querySelector("link[rel*='icon']").href = "favicon.ico";
- vorillaz
1
@pkExec 这个方法和上面 keparo 的答案（被选中的答案）的结合，让我在 Firefox 和 Chrome 上都成功了。 - MrShmee
26
一种更现代的方法：
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")
- Michał Perłakowski
24
这里是一小段代码片段，可以将网站图标变成表情符号或文本。当我在stackoverflow的控制台时，它能够正常工作。
function changeFavicon(text) {
const canvas = document.createElement('canvas');
canvas.height = 64;
canvas.width = 64;
const ctx = canvas.getContext('2d');
ctx.font = '64px serif';
ctx.fillText(text, 0, 64);
const link = document.createElement('link');
const oldLinks = document.querySelectorAll('link[rel="shortcut icon"]');
oldLinks.forEach(e => e.parentNode.removeChild(e));
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon';
link.href = canvas.toDataURL();
document.head.appendChild(link);
}
changeFavicon('❤️');
- ubershmekel
1
我喜欢这种方法，不需要外部URL或favicon文件。 - Savrige
13
网站的favicon可以在head标签中声明，例如：
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
你应该可以在视图数据中直接传递所需的图标名称，并将其放入head标签中。
- Jeff Sheldon
2
1如果我没记错的话，然而有些浏览器（我在看你，IE）有时并不真正尊重这一点。 - Matthew Schinckel
我发现只要将图标文件放在正确的位置，而不是使用显式链接，效果更好。 - Matthew Schinckel
9
以下是我用于为Opera、Firefox和Chrome添加动态favicon支持的代码。但是，我无法让IE或Safari正常工作。基本上，Chrome允许动态favicon，但据我所知，它只在页面位置（或其中的iframe等）更改时更新它们：
var IE = navigator.userAgent.indexOf("MSIE")!=-1
var favicon = {
change: function(iconURL) {
if (arguments.length == 2) {
document.title = optionalDocTitle}
this.addLink(iconURL, "icon")
this.addLink(iconURL, "shortcut icon")
// Google Chrome HACK - whenever an IFrame changes location
// (even to about:blank), it updates the favicon for some reason
// It doesn't work on Safari at all though :-(
if (!IE) { // Disable the IE "click" sound
if (!window.__IFrame) {
__IFrame = document.createElement('iframe')
var s = __IFrame.style
s.height = s.width = s.left = s.top = s.border = 0
s.position = 'absolute'
s.visibility = 'hidden'
document.body.appendChild(__IFrame)}
__IFrame.src = 'about:blank'}},
addLink: function(iconURL, relValue) {
var link = document.createElement("link")
link.type = "image/x-icon"
link.rel = relValue
link.href = iconURL
this.removeLinkIfExists(relValue)
this.docHead.appendChild(link)},
removeLinkIfExists: function(relValue) {
var links = this.docHead.getElementsByTagName("link");
for (var i=0; i<links.length; i++) {
var link = links[i]
if (link.type == "image/x-icon" && link.rel == relValue) {
this.docHead.removeChild(link)
return}}}, // Assuming only one match at most.
docHead: document.getElementsByTagName("head")[0]}
要更改网站图标，只需使用上述代码
favicon.change("ICON URL")。感谢我基于此代码的来源 http://softwareas.com/dynamic-favicons。- cryo
2
Chrome仍然存在同样的bug，尽管情况略有不同于特定的bug注释。http://code.google.com/p/chromium/issues/detail?id=99549 - danorton
9
如果你想要一个表情符号：)
赞扬 https://koddsson.com/posts/emoji-favicon/。
var canvas = document.createElement("canvas");
canvas.height = 64;
canvas.width = 64;
var ctx = canvas.getContext("2d");
ctx.font = "64px serif";
ctx.fillText("☠️", 0, 64);
$("link[rel*='icon']").prop("href", canvas.toDataURL());
赞扬 https://koddsson.com/posts/emoji-favicon/。
- max4ever
1
这是令人难以置信的水平。 - aggregate1166877
5
在大多数情况下，favicon 是这样声明的。
<link rel="icon" href"...." />
通过这种方式，您可以使用此方法引用它。
const linkElement = document.querySelector('link[rel=icon]');
你可以使用这个来更换图片
linkElement.href = 'url/to/any/picture/remote/or/relative';
- yooneskh
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接