我有一个网络应用程序,根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的标志,但我无法找到如何做到这一点的任何代码或任何示例。以前有人成功做到过吗?
我想象在一个文件夹中有12个图标,使用哪个favicon.ico文件的引用是与HTML页面一起动态生成的。想法吗?
我有一个网络应用程序,根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的标志,但我无法找到如何做到这一点的任何代码或任何示例。以前有人成功做到过吗?
我想象在一个文件夹中有12个图标,使用哪个favicon.ico文件的引用是与HTML页面一起动态生成的。想法吗?
当前回答
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";
其他回答
favicon在head标签中声明,如下所示:
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
您应该能够在视图数据中传递您想要的图标的名称,并将其扔到head标记中。
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 以防别人有同样的问题
根据WikiPedia,你可以使用头部部分的链接标签指定加载哪个favicon文件,参数rel="icon"。
例如:
<link rel="icon" type="image/png" href="/path/image.png">
我想,如果您想为该调用编写一些动态内容,那么您就可以访问cookie,以便以这种方式检索会话信息并显示适当的内容。
你可能会遇到文件格式的问题(据报道IE只支持。ico格式,而大多数人都支持PNG和GIF图像),也可能会遇到缓存问题,无论是在浏览器上还是通过代理。这可能是因为favicon最初的意图,特别是用网站的迷你标志标记书签。
为什么不呢?
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';
我在我的项目中使用favico.js。
它允许将图标更改为一系列预定义的形状和自定义的形状。
在内部,它使用canvas渲染和base64数据URL图标编码。
这个库也有不错的功能:图标徽章和动画;据说,你甚至可以流网络摄像头视频到图标:)