动态更改网站图标

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

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

当前回答

对于那些使用jQuery的人来说，有一个单行解决方案:

$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');

2018-09-02 15:24:50

其他回答

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

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

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

2008-11-04 04:20:50

下面是我用来为Opera、Firefox和Chrome添加动态图标支持的一些代码。不过我无法让IE或Safari正常工作。基本上Chrome允许动态favicons，但只有当页面的位置(或iframe等)发生变化时才会更新它们:

var IE = navigator.userAgent.indexOf("MSIE")!=-1
var favicon = {
    change: function(iconURL) {
        if (arguments.length == 2) {
            document.title = optionalDocTitle}
        this.addLink(iconURL, "icon")
        this.addLink(iconURL, "shortcut icon")

        // Google Chrome HACK - whenever an IFrame changes location 
        // (even to about:blank), it updates the favicon for some reason
        // It doesn't work on Safari at all though :-(
        if (!IE) { // Disable the IE "click" sound
            if (!window.__IFrame) {
                __IFrame = document.createElement('iframe')
                var s = __IFrame.style
                s.height = s.width = s.left = s.top = s.border = 0
                s.position = 'absolute'
                s.visibility = 'hidden'
                document.body.appendChild(__IFrame)}
            __IFrame.src = 'about:blank'}},

    addLink: function(iconURL, relValue) {
        var link = document.createElement("link")
        link.type = "image/x-icon"
        link.rel = relValue
        link.href = iconURL
        this.removeLinkIfExists(relValue)
        this.docHead.appendChild(link)},

    removeLinkIfExists: function(relValue) {
        var links = this.docHead.getElementsByTagName("link");
        for (var i=0; i<links.length; i++) {
            var link = links[i]
            if (link.type == "image/x-icon" && link.rel == relValue) {
                this.docHead.removeChild(link)
                return}}}, // Assuming only one match at most.

    docHead: document.getElementsByTagName("head")[0]}

要更改favicon，只需访问favicon。更改("ICON URL")使用上述。

(我基于http://softwareas.com/dynamic-favicons的代码。)

2010-05-27 09:10:42

下面是一个片段，使favicon成为一个表情符号或文本。当我在stackoverflow时，它在控制台工作。

function changeFavicon(text) {
  const canvas = document.createElement('canvas');
  canvas.height = 64;
  canvas.width = 64;
  const ctx = canvas.getContext('2d');
  ctx.font = '64px serif';
  ctx.fillText(text, 0, 64);

  const link = document.createElement('link');
  const oldLinks = document.querySelectorAll('link[rel="shortcut icon"]');
  oldLinks.forEach(e => e.parentNode.removeChild(e));
  link.id = 'dynamic-favicon';
  link.rel = 'shortcut icon';
  link.href = canvas.toDataURL();
  document.head.appendChild(link);
}

changeFavicon('❤️');

2021-03-06 08:24:05

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 以防别人有同样的问题

2021-11-19 19:49:02

一个更现代的方法:

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

2016-03-12 16:43:57

动态更改网站图标

推荐文章

最新文章

标签