我有一个网络应用程序,根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的标志,但我无法找到如何做到这一点的任何代码或任何示例。以前有人成功做到过吗?
我想象在一个文件夹中有12个图标,使用哪个favicon.ico文件的引用是与HTML页面一起动态生成的。想法吗?
我有一个网络应用程序,根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的标志,但我无法找到如何做到这一点的任何代码或任何示例。以前有人成功做到过吗?
我想象在一个文件夹中有12个图标,使用哪个favicon.ico文件的引用是与HTML页面一起动态生成的。想法吗?
当前回答
在大多数情况下,favicon是这样声明的。
<link rel="icon" href"...." />
这样你就可以得到它的参考。
const linkElement = document.querySelector('link[rel=icon]');
你可以用这个改变图像
linkElement.href = 'url/to/any/picture/remote/or/relative';
其他回答
根据WikiPedia,你可以使用头部部分的链接标签指定加载哪个favicon文件,参数rel="icon"。
例如:
<link rel="icon" type="image/png" href="/path/image.png">
我想,如果您想为该调用编写一些动态内容,那么您就可以访问cookie,以便以这种方式检索会话信息并显示适当的内容。
你可能会遇到文件格式的问题(据报道IE只支持。ico格式,而大多数人都支持PNG和GIF图像),也可能会遇到缓存问题,无论是在浏览器上还是通过代理。这可能是因为favicon最初的意图,特别是用网站的迷你标志标记书签。
如果你有以下HTML片段:
<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />
你可以使用Javascript通过改变这个链接上的HREF元素来改变favicon,例如(假设你正在使用JQuery):
$("#favicon").attr("href","favicon2.png");
您还可以创建一个Canvas元素,并将HREF设置为画布的ToDataURL(),就像Favicon Defender所做的那样。
我在我的项目中使用favico.js。
它允许将图标更改为一系列预定义的形状和自定义的形状。
在内部,它使用canvas渲染和base64数据URL图标编码。
这个库也有不错的功能:图标徽章和动画;据说,你甚至可以流网络摄像头视频到图标:)
为什么不呢?
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';
2021年在Chrome上测试提出的解决方案时,我发现浏览器有时会缓存favicon,即使链接发生了变化,也不会显示更改
这段代码可以工作(类似于前面的建议,但添加了一个随机参数以避免缓存)
let oldFavicon = document.getElementById('favicon')
var link = document.createElement('link')
link.id = 'favicon';
link.type = 'image/x-icon'
link.rel = 'icon';
link.href = new_favicon_url +'?=' + Math.random();
if (oldFavicon) {
document.head.removeChild(oldFavicon);
}
document.head.appendChild(link);
摘自https://gist.github.com/mathiasbynens/428626#gistcomment-1809869 以防别人有同样的问题