我有一个网络应用程序,根据当前登录的用户进行标记。我想将页面的图标更改为私有标签的标志,但我无法找到如何做到这一点的任何代码或任何示例。以前有人成功做到过吗?

我想象在一个文件夹中有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';

其他回答

为什么不呢?

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';

如果你有以下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所做的那样。

是的,完全可能

在favicon.ico(和其他文件链接- 见下面的答案链接) 只需确保服务器响应“someUserId” 正确的映像文件(可以是静态路由规则或 动态服务器端代码)。

如。

<link rel="shortcut icon" href="/favicon.ico?userId=someUserId">

然后,无论您使用何种服务器端语言/框架,都应该能够轻松地基于userId找到该文件,并响应该请求。

但是要正确地做favicons(这实际上是一个非常复杂的主题),请在这里看到答案https://stackoverflow.com/a/45301651/661584

这比你自己解决所有细节要容易得多。

享受。

根据WikiPedia,你可以使用头部部分的链接标签指定加载哪个favicon文件,参数rel="icon"。

例如:

 <link rel="icon" type="image/png" href="/path/image.png">

我想,如果您想为该调用编写一些动态内容,那么您就可以访问cookie,以便以这种方式检索会话信息并显示适当的内容。

你可能会遇到文件格式的问题(据报道IE只支持。ico格式,而大多数人都支持PNG和GIF图像),也可能会遇到缓存问题,无论是在浏览器上还是通过代理。这可能是因为favicon最初的意图,特别是用网站的迷你标志标记书签。

唯一的方法,使此工作的IE是设置您的web服务器处理*.ico请求调用您的服务器端脚本语言(PHP, . net等)。还设置*.ico重定向到单个脚本,并让该脚本交付正确的favicon文件。我敢肯定,如果你想在同一个浏览器中在不同的favicon之间来回跳转,缓存仍然会有一些有趣的问题。