我有一个网络应用程序,根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的标志,但我无法找到如何做到这一点的任何代码或任何示例。以前有人成功做到过吗?
我想象在一个文件夹中有12个图标,使用哪个favicon.ico文件的引用是与HTML页面一起动态生成的。想法吗?
我有一个网络应用程序,根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的标志,但我无法找到如何做到这一点的任何代码或任何示例。以前有人成功做到过吗?
我想象在一个文件夹中有12个图标,使用哪个favicon.ico文件的引用是与HTML页面一起动态生成的。想法吗?
当前回答
对于那些使用jQuery的人来说,有一个单行解决方案:
$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');
其他回答
我在我的项目中使用favico.js。
它允许将图标更改为一系列预定义的形状和自定义的形状。
在内部,它使用canvas渲染和base64数据URL图标编码。
这个库也有不错的功能:图标徽章和动画;据说,你甚至可以流网络摄像头视频到图标:)
favicon在head标签中声明,如下所示:
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
您应该能够在视图数据中传递您想要的图标的名称,并将其扔到head标记中。
或者如果你想要一个表情符号:)
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/
一个更现代的方法:
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")
如果你有以下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所做的那样。