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

我想象在一个文件夹中有12个图标,使用哪个favicon.ico文件的引用是与HTML页面一起动态生成的。想法吗?


当前回答

或者如果你想要一个表情符号:)

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/

其他回答

在大多数情况下,favicon是这样声明的。

<link rel="icon" href"...." />

这样你就可以得到它的参考。

const linkElement = document.querySelector('link[rel=icon]');

你可以用这个改变图像

linkElement.href = 'url/to/any/picture/remote/or/relative';

favicon在head标签中声明,如下所示:

<link rel="shortcut icon" type="image/ico" href="favicon.ico">

您应该能够在视图数据中传递您想要的图标的名称,并将其扔到head标记中。

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

例如:

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

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

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

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

一个更现代的方法:

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")