如何强制 ie11 请求新的图标？

Posted 2023-04-19

【中文标题】如何强制 ie11 请求新的图标？

【英文标题】：How to force ie11 to request a new favicon?

【发布时间】：2015-04-02 03:35:55

【问题描述】：

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

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

但是，图标仍然被缓存在 ie11 中。当我在 Netbeans 上打开调试时，控制器没有收到任何请求。

注意事项：

进入网站后的第一个网站图标有效。我就是换不来 登录后即可。 我在地址栏中输入了 favicon url，它返回了正确的 favicon。

我一直在环顾四周，但找不到解决此问题的方法。 ：

【参考方案1】：

使用 javascript 更改 IE11 中的 favicon：

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 方法结合使用。

【讨论】：

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

【参考方案2】：

您确定它不只是在本地缓存吗？我认为问题在于 IE11 不想寻找新的图标，而是使用本地缓存的图标。

尝试强制它获取网站图标。在这里查看亚历克斯的答案： How do I force a favicon refresh

按照这些步骤，您应该能够在设备上的 IE11 上显示新的网站图标。

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

同一线程中的另一个巧妙技巧： How do I force a favicon refresh

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

【讨论】：

是的，它被缓存了。是的，EI11 不会寻找新的网站图标。我在问题中提到： 1. 即使添加了类似于hash query string 的 $date.time URL 参数，浏览器也不会请求新的网站图标 2. 网站图标应该在 之后更改用户登录。执行hard refresh, restart 仍需要在重新启动后显示默认图标。

【参考方案3】：

警告：虽然这个答案（在我看来）是一个很好的建议，但它不适用于 IE11

将 URL 参数添加到常规 favicon 路径是更新 favicon 并强制浏览器重新加载它的有用技术。然而，众所周知，浏览器在加载网站图标时非常懒惰。因此，刷新您的网站图标通常可能超出了额外 URL 参数技术的能力。

我建议您尝试favicon.js。这个 JavaScript 库旨在创建动态网站图标并让您做出非常棒的事情。

【参考方案4】：

要更改网站图标并确保显示新网站图标而不是旧网站图标，一种简单而简单的方法是更改网站图标的名称，您不必将其命名为 favicon.ico，将其命名为anything.ico，并将通常的代码行放在头部：

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

并上传 ico 文件：anything.ico（根据需要更改任何内容）。