如何强制IE11请求一个新的网站图标？

Question

我正在开发一个网站，根据用户登录的详细信息来更改网站的图标。控制器在后端处理此请求，并为该站点发送适当的浏览器图标。到目前为止，我通过以下方式避免大多数浏览器缓存favicon：

<link rel="shortcut icon" type="image/x-icon" href="resources/favicon.ico?v=${date.time}"/>

然而，在ie11中，favicon仍会被缓存。当我在Netbeans上打开调试时，控制器未收到任何请求。

需要注意以下几点：

1. 进入网站后的第一个favicon可以正常使用，但登录后无法替换它。
2. 我在地址栏中输入了favicon的url，并返回了正确的favicon。

我一直在寻找解决这个问题的方法，但是没有找到 :<

- Maggie

Answer 1

使用JavaScript在IE11中更改网站图标：

HTML

<link rel="icon" type="image/x-icon" href="resources/favicon.ico">

JS

// Chrome allows you to simply tweak the HREF of the LINK tag.
// Firefox appears to require that you remove it and readd it.
function setFavicon(url)
{
    removeFavicon();
    var link=document.createElement('link');
    link.type='image/x-icon';
    link.rel='icon';
    link.href=url;
    document.getElementsByTagName('head')[0].appendChild(link);
    if (window.console) console.log("Set FavIcon URL to " + getFavicon().href);
 }

function removeFavicon()
{
    var links=document.getElementsByTagName('link');
    var head=document.getElementsByTagName('head')[0];
    for(var i=0; i<links.length; i++)
    {
        if(links[i].getAttribute('rel')==='icon'){
             head.removeChild(links[i])
        }         
    }      
}

演示: http://www.enhanceie.com/test/favicon/dynamic.htm

注意: 这个方法适用于Chrome、Firefox和IE11+，但不适用于IE10及更早版本、Opera 12.15或Safari 6.0.5(mac)。在早期浏览器中，可以将此方法与favicon.ico?v=xxxx方法结合使用。

- Drakes

---

我一直在追求这个解决方案，认为它对我的项目是必需的，但最终我意识到我使用的图标路径没有前导斜杠。Chrome仍然能够找到图标，但IE11无法找到，可能是因为它将其读取为相对路径，在除主页以外的任何地方都无法找到该文件。分享一下，以防其他人遇到浏览器之间的特定行为差异。 - Ross Llewallyn

Answer 2

你确定它不仅仅是本地缓存吗？我认为问题在于IE11不想寻找新的网站图标，并且使用本地缓存的图标。

尝试强制刷新网站图标。请参考Alex在这里的答案： 如何强制刷新网站图标

通过遵循这些步骤，您应该能够在IE11上看到新的网站图标。

或者，您可以完全重命名网站图标，并使用链接标签和新名称。 <link rel="shortcut icon" href="/images/new-favicon-name.ico" />

同一主题中的另一个巧妙技巧： 如何强制刷新网站图标

使用文件的哈希作为版本保证了唯一的名称。

- Mo Beigi

---

是的，它被缓存了。是的，EI11不会寻找新的网站图标。我在问题中提到：

1. 即使添加了一个类似于hash query string的${date.time} URL参数，浏览器也不会请求新的网站图标。
2. 网站图标应该在用户登录后更改。即使进行强制刷新、重启，重启后仍需要出现默认的网站图标。

- Maggie

Answer 3

更改网站图标并确保新的网站图标能够显示而不是旧的网站图标，一种简单且易懂的方法是更改网站图标的名称，您不必将其命名为favicon.ico，可以将其命名为任何.ico，并在头部区域中放置通常的代码行：

<link rel="shortcut icon" href="interdit.ico"> 

并上传ico文件：anything.ico（将anything更改为您想要的任何内容）。

- Denis Roques

Answer 4

警告：尽管我认为这个答案是一个好建议，但它不适用于IE11

将URL参数添加到常规favicon路径是一种有用的技术，可以更新favicon并强制浏览器重新加载它。然而，浏览器在处理favicon时通常非常懒惰。因此，经常刷新您的favicon可能超出了额外URL参数技术的能力范围。

我建议您尝试favicon.js。这个JavaScript库旨在创建动态favicon，并让您做一些很棒的事情。

- philippe_b