如何强制刷新图标？答案

【问题标题】：How do I force a favicon refresh?如何强制刷新图标？
【发布时间】：2011-01-13 14:46:06
【问题描述】：

我有一个使用自己的 tomcat 在本地运行的 Grails 应用程序，我刚刚将 favicon 更改为新的。问题是我在任何浏览器中都看不到它。旧的图标出现了，或者我根本没有图标，但不是我的新图标。我认为这本身不是 Grails 问题，更多的是网站图标问题。

网站图标应该发生什么？他们应该如何工作？我的浏览器中有许多带有错误图标的书签，而且它们似乎从未刷新过。如何强制服务器/浏览器停止缓存它们？考虑到它们通常只有 16x16，总是缓存它们似乎很愚蠢。为什么不在每次访问页面时上传它们？这并不是一个巨大的开销。

【问题讨论】：

接受和高度赞成的解决方案并不是真正的解决方案。刷新不起作用的实际原因可以在这个问题的解决方案中找到：stackoverflow.com/questions/8616016/… ---图标缓存在sqlite DB文件中，独立于浏览器缓存！
接受和高度赞成的解决方案是生产解决方案，还是我应该为用户编写教程，当我们更新生产的 favicon 时如何清除他们的 favicon 缓存？
不是一个通用的解决方案。如果您在不接触代码的情况下使用 favicon 默认位置怎么办？也就是说，您的文档根目录中有一个favicon.ico 文件。
xkcd.com/1854

标签： favicon

【解决方案1】：

很可能是网络浏览器问题。您必须从浏览器中删除缓存，关闭浏览器并重新打开它。那应该可以解决它。

在您重新访问该页面并假设您之前已清除浏览器缓存之前，我认为您的收藏夹不会刷新您的网站图标。

您的网络浏览器不会自行上网检查新的网站图标...谢天谢地。

【讨论】：

“您的网络浏览器不会自行访问 Internet 来检查新的网站图标...谢天谢地。”为什么不？为什么不在每次页面加载时刷新它？这是一个2k的图像，这是花生。它永远不应该过时。整个缓存的想法在宏伟的计划中只是愚蠢的。
developer.yahoo.com/performance/rules.html 提到了您可能没有想到的与下载 favicon.ico 相关的问题。周围都有很好的提示。缓存是一种有价值的工具，可确保您的网站尽可能快地运行。缓存对于让您的浏览器感觉尽可能快也很有用。
@Simon，缓存很傻？！？为了您的客户，我希望您从 2010 年开始了解更好的 Web 开发的重要性。什么是“愚蠢”的不是缓存并向您的服务器发出不必要的请求，而这些请求相当于一个静态文件，如果有的话，很少会更改。

【解决方案2】：

根据浏览器的不同，它们的处理方式不同，但通常我发现会转到网站的默认页面并进行硬刷新。 CTRL + F5（或 ⌘ 命令 + SHIFT + F5 在 macOS 上），通常会更新它。

【讨论】：

Mac 用户：CMD SHIFT 5

【解决方案3】：

重命名favicon文件并添加一个带有新名称的html头，例如：

<link rel="SHORTCUT ICON" href="http://www.yoursite.com/favicon2.ico" />

【讨论】：

我假设浏览器可以查看网站图标名称是否相同。如果是，它不会再次请求下载，而是使用已缓存的下载，但如果您更改名称，它会假定它已更改，从而从服务器请求它。
我遇到了 IE8 的问题。它没有使用放在子文件夹中的 favicon.ico。添加 rel-attribute 'shortcut' 修复了它。
一点都不清爽，完全换了新的。
请注意，您还必须重命名您的实际 favicon.ico（它将位于您的构建文件夹或提供 web 应用程序的目录中）

【解决方案4】：

嗯，开销是开销，但是是的，不是太大。

此外，浏览器有时会“贪婪”缓存文件。您可以清除缓存和/或重新启动浏览器并可能会看到更改。如果失败了……

我的廉价解决方案是：

在浏览器中通过http://example.com/favicon.ico 访问您的文件。
从您的 webroot 中删除 favicon.ico。
在浏览器中再次访问http://example.com/favicon.ico，确认它丢失了。
将新的上传到您的 webroot。
在浏览器中再次访问http://example.com/favicon.ico，确认它是新的。

如果该序列不起作用，则说明发生了其他事情。

【讨论】：

这对我有用，但遗憾的是我们不能要求每个访问者都这样做。

【解决方案5】：

当您向 Google 请求网站图标时，您可以查看响应标头。

Last-Modified: Fri, 09 Jan 2009 16:35:02 GMT
Date: Thu, 01 Dec 2010 00:00:01 GMT
Expires: Fri, 01 Dec 2011 00:00:01 GMT
Cache-Control: public, max-age=31536000
Age: 7

如果您在响应中添加“Expires:”标头，客户端浏览器将在该时间戳之后重新请求该图标。在进行主动开发时，您可以将 expires 时间戳设置为未来一两秒，并始终让它获取这个，尽管这是一个糟糕的长期计划。

【讨论】：

它也只能先发制人，这超出了问题的目的。

【解决方案6】：

还要确保您放置完整的图片 URL，而不仅仅是其相对路径：

http://www.example.com/images/favicon.ico

而不是：

images/favicon.ico

【讨论】：

/images/favicon.ico 是正确的做法：它“只适用于”不同的环境（开发/测试/生产），并且是绝对路径 - 来自文档基础 URL。
不幸的是，您需要 IE7 (&IE8?) 的完全限定 URL - 请参阅 jeffcode.blogspot.com.au/2007/12/…
这不是真正的答案，这是评论。

【解决方案7】：

这是我使用简单的动画图标和 FireFox 3.6.13（测试版）管理它的方法。它可能也适用于其他版本的 FireFox，如果不能，请告诉我。它基本上是 artlung 的解决方案，但也解决了 .gif 文件：

我通过 FTP 程序打开，下载了我的 favicon.ico 和 favicon.gif 文件，
然后从我的服务器文件中删除它们。
然后我按照 artlung 的建议在浏览器中打开它们： http://mysite.com/favicon.ico AND http://mysite.com/favicon.gif 一旦这些地址加载并显示 404 错误页面（“找不到页面”）
然后我将这两个文件上传回我的服务器，然后 PRESTO - 立即显示正确的图标。

【讨论】：

哦 - 顺便说一句，要显示新的书签，我还必须删除我保存的书签 - 同样的过程也适用于谷歌浏览器。

【解决方案8】：

改编自lineofbird's answer beloew，您可以执行以下操作：

通过输入地址直接转到地址栏中的网站图标网址例如
- www.yoursite.com/favicon.ico
- www.yoursite.com/apple-touch-icon.png
- 等
按 Enter
导航到 url
使用 Ctrl+F5
刷新
重新启动您的浏览器（例如 Chrome、Firefox）

【讨论】：

使用这种方法你可能会克服缓存，但你现有的用户不能。因此，我发现另一个答案更有价值。
值得注意的是，这在 Firefox 33 中不起作用。第一个答案是更好的选择。
我必须关闭开发工具才能在 Chrome 中进行这项工作。
我不必重新启动浏览器，但我必须在没有打开 devtools 的情况下导航到我的网站。出于某种原因，非开发工具选项卡中的 Ctrl+F5'ing 做到了。我可以按我想要的方式按 Ctrl+F5 并在整个互联网上导航，然后在 devtools 选项卡中尽可能多地返回我的网站，而且它永远不会更新网站图标。
“重新启动浏览器”部分是唯一真正使它对我有用的东西。所有其他修复在理论上都有效，但实际上并没有改变浏览器选项卡上显示的图标像素。 +1 这个答案

【解决方案9】：

如果您只是想调试它以确保它已更改，您可以在 /etc/hosts 文件中添加一个虚拟条目并点击新 URL。该图标不会被缓存，您可以确保您的新图标正常工作。

只需更改网站图标的名称，您就无法强迫用户获取新副本

【讨论】：

【解决方案10】：

要刷新您网站的图标，您可以强制浏览器使用链接标签和文件名上的查询字符串下载新版本。
这在生产环境中特别有用，可确保您的用户获得更新。

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

【讨论】：

这对我有用。我不得不从我的代码中删除type="image/x-icon"，这与许多来源相反。我对查询的v?=2 部分使用了文件修改时间戳。
我发现在某些浏览器中，favicon 无论如何都不会更新，除非我删除了历史记录。然后它将保存新的网站图标。
不幸的是，您需要 IE7 (&IE8?) 的完全限定绝对 URL - 请参阅 jeffcode.blogspot.com.au/2007/12/…
同意上述 cmets，但这适用于所有当前浏览器：
缓存图标是有意义的，因为它们有时会增加 2-3 KB 的大小。您不想继续传输所有这些数据。（是的，讽刺）

【解决方案11】：

我最近恢复了我的书签，并正在寻找一种无需访问每个页面即可恢复 FavIcon 的方法。我的搜索把我带到了这个线程。

对于那些处于类似情况的人，只需下载 FAVICON RELOADER 插件即可。安装后，您会在 BOOKMARKS 下拉菜单中找到“重新加载收藏图标”命令。

https://addons.mozilla.org/en-US/firefox/addon/faviconreloader/?src=api

【讨论】：

它已经回到那里进行安装并且看起来很有希望（您会在书签菜单中找到 AddOn），但它也没有重新加载我的 firefox 34（在 linux 上）上的图标而无需重新启动

【解决方案12】：

西蒙，我想到目前为止没有其他答案被接受是有原因的。因此，我相信这可能仍然是 Grails 问题 - 特别是如果您使用的是“资源插件”。

如果你的插件提供了一个图标（不合逻辑地——很多人都这样做），它们可能会覆盖你想要使用的图标——因为你的插件本身就在插件中。

如果从所有插件中临时删除网站图标可以解决问题，那么您很可能会遇到这种情况：

http://jira.grails.org/browse/GPRESOURCES-134

【讨论】：

【解决方案13】：

对于 Internet Explorer，还有另一种解决方案：

打开 Internet Explorer。
点击菜单 > 工具 > 互联网选项。
点击常规 > 临时 Internet 文件 > “设置”按钮。
点击“查看文件”按钮。
找到旧的 favicon.ico 文件并将其删除。
重新启动浏览器（Internet Explorer）。

【讨论】：

【解决方案14】：

尝试在新标签页中打开

我尝试了上面的很多东西（重置缓存、刷新、使用链接标签等），我什至检查了我的 .htaccess 文件并重置了 ExpiresByType 变量。

但这是最终在 Chrome (25.0.x) 和 Safari (6.0.1) 中对我有用的方法：

刷新缓存
使用<link> 标签硬链接网站图标
导航到mysite.com/favicon.ico
在新标签页中打开mysite.com

（直到第 3 步，在同一个选项卡中刷新一直在重现旧图标。）

【讨论】：

【解决方案15】：

这是 chrome 错误的解决方法：将 rel 属性更改为样式表！不过保留原链接。像魅力一样工作：

我想出了这个解决方法，因为我们还需要能够更新客户的站点/生产代码，但我没有找到任何其他可行的解决方案。

【讨论】：

我在这里尝试了所有建议（编码）解决方案，这是唯一对我有用的解决方案。你知道为什么吗？
真的“像个魅力”。还有最简单的方法。

【解决方案16】：

简单，

1：我不想摆弄代码（ps我的网站构建器不使用代码，它使用“上传文件”按钮，它自己做）

2：我尝试了 CTRL+F5，但它对我不起作用，所以......

我有一个解决方案：

IE：通过转到设置 cog O 清除所有浏览器历史记录和 cookie

Chrome：转到右上角 X 下方看起来像 = 的菜单，然后转到设置、历史记录、清除浏览数据并选中所有适用的框（我做了历史记录、cookie 并清空从一开始就抓住了）

【讨论】：

这个问题与如何缓存网站图标有关。清除本地缓存将为您解决问题，但对其他人无济于事。
@MarkChorley 这正是最初的问题。在本地开发环境中缓存网站图标。

【解决方案17】：

在 Mac OS X 上的 Chrome 中，可以使用 favicon 缓存删除文件

${user.home}/Library/Application Support/Google/Chrome/Default/Favicons

【讨论】：

这个解决方案对我有用。出于某种原因，它并没有用上述方法以更多的票数刷新图标。所以谢谢你，Maxim Mazin。我只想摆脱一个旧的网站图标，我知道我的新主机上不再存在。
这种方法在 Windows 上也适用于我，我已经从我的应用程序中删除了 favicon，但 chrome 仍然显示它。关闭 Chrome，删除“C:\Users\{user}\AppData\Local\Google\Chrome\User Data\Default\Favicons”，然后重启 Chome。旧的不受欢迎的网站图标不见了。
我在“默认”下什么都没有，但最终我发现了这个变化：${user.home}/Library/Application Support/Google/Chrome/Profile 1/Favicons
@mdahlman 在尝试了所有其他方法后，这最初对我不起作用。但是我在cmd+qing chrome 之后让这个工作，进入菜单栏，再次强制退出 chrome 并等待 2 分钟打开浏览器并导航回我的网站。

【解决方案18】：

如果你使用的是 PHP .. 那么你也可以使用这一行。

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=<?php echo time() ?>" />

它会在每次页面加载时刷新您的网站图标。

【讨论】：

这就是问题“它会在每次页面加载时刷新您的网站图标”。缓存怎么样？网站图标应该被缓存。
如果你想缓存你的新网站图标.. 只需提供任何新值，如.. yoursite.com/favicon.ico?v=12345">
favicon.ico?v=
这不是解决这个问题的好方法。使用 time() 将强制它每次重新加载图标。您希望 favicon.ico 文件的最后修改时间不是当前挂钟时间。
如果您四舍五入到最近的 24 小时或最近的 30 天怎么办？每月重置一次缓存可能会有用

【解决方案19】：

如果你使用 PHP，你也可以使用 favicon 的 MD5-Hash 作为查询字符串：

<link rel="shortcut icon" href="favicon.ico?v=<?php echo md5_file('favicon.ico') ?>" />

这样，Favicon 将在更改时始终刷新。

正如 cmets 中所指出的，您还可以使用最后修改日期而不是 MD5-Hash 来实现相同的目的并节省一点服务器性能：

<link rel="shortcut icon" href="favicon.ico?v=<?php echo filemtime('favicon.ico') ?>" />

【讨论】：

很好，这避免了每次我更新图标时都需要更改href，这个答案应该有更多的投票！
这个答案的问题是你在计算每个请求的哈希值，这是不必要的，并且可能会损害网站性能（如果有很多用户）。
在这两种意义上都没什么大不了的......一个网站图标只有几千字节......我的意思是，它对服务器的压力不会比必须服务器favicon 每次...
我仍然看不到任何真正的理由来计算 MD5。使用文件的最后修改日期更容易且同样有效。我认为使用 MD5 与上次修改的图章相比没有任何优势。
您多久真正更新一次您的网站图标？这似乎有点矫枉过正。制作新图标时只需使用手动查询字符串即可。

【解决方案20】：

在 MAC 上： ⌘ + Shift-R 或按住 Ctrl 并单击浏览器中的重新加载按钮。

【讨论】：

这不会强制重新加载网站图标。
这确实重新加载了我的网站图标/修复了问题
适用于 ubuntu 16.04

【解决方案21】：

这个答案还没有给出，所以我想我会发布它。我环顾了整个网络，并没有找到在本地开发中测试网站图标的好答案。

在当前版本的 chrome 中（在 OSX 上），如果您执行以下操作，您将获得即时的网站图标刷新：

将鼠标悬停在标签上
右击
选择重新加载
现在应该刷新您的网站图标

这是我发现在本地刷新网站图标的最简单方法。

【讨论】：

不幸的是，这在 IE 甚至 Windows 上的 Chrome 中都不起作用，因此除非您只在 OSX 上使用 Chrome，否则您似乎应该接受已接受的答案。
在 OS X Sierra 中使用 Chrome 53.0.2785.143（64 位）
对我有用：Chrome 58.0.3029.110、Windows 10、本地主机
在适用于 Windows 10 的 Chrome 63.0.3239.84 上工作！
在 OSX 上的 Chrome 67.0 中工作。奇怪的是它不适用于CMD+Shift+R

【解决方案22】：

如果尽管应用了上述一些步骤，问题仍然存在尝试重新启动 IIS 服务器。希望这会有所帮助...

【讨论】：

【解决方案23】：

Chrome 的 favicon 支持有问题 - 忽略这个答案

我写这个答案的印象是，这就是在谷歌浏览器中刷新网站图标所需要的。然而，事实证明这只适用于前五分钟左右，直到图标变为irretrievably lost in Chrome's history synchronization。

原答案

您不必清除缓存、重新启动浏览器、或重写您的 HTML - 您只需更改图标的 URL，一次，以便浏览器会忘记之前缓存的图标。

假设您已通过页面的 <head> 中的 <link> 元素定义了您的图标，您可以通过在控制台中运行此 standard-JS one-liner 来做到这一点：

[].slice.call(document.querySelectorAll('head>link[rel$="icon"]')).map(function(ln){ln.href+='?v=2'});

有关可以为生产中的最终用户自动执行此操作的更高级实现，请参阅freshicon.js。

【讨论】：

如果您试图摆脱不受您控制的服务器上的缓存图标，这实际上很有用，该图标现在丢失/返回非 200 http 代码。而不是附加 ?v=2 将整个 URL 换成您选择的图标，它似乎在刷新后仍然存在

【解决方案24】：

通过销毁浏览器用来存储旧图标的文件，您可以强制加载新图标。

关闭浏览器。确保不再有浏览器进程在运行（例如，检查任务管理器中的 chrome.exe 或 firefox.exe）。
导航到浏览器存储用户文件的位置：
- 对于 Chrome，请转至 Chrome data directory。
- 对于 Firefox，请转至 Firefox profile folder。
删除网站图标缓存。
- 对于 Chrome，删除 Favicons 和 Favicons-journal
- 对于 Firefox，删除 favicons.sqlite

这几乎肯定会奏效。如果没有：

可能性 1：浏览器的更新改变了网站图标缓存的工作方式。请使用新说明编辑此答案。
可能性 2：您的网站图标问题与过度缓存无关。相反，它可能是资源加载问题 - 使用开发者工具，确保新网站图标正在正确下载。

【讨论】：

这成功了。对我来说，这是一个 Google Chrome 应用程序图标问题。不是 DOM 图标问题。
这是一个很好的答案，可以满足我的测试需求。这个问题没有一个真正的答案，因为这取决于谁需要刷新它以及他们愿意并且能够合理地做些什么。
只是一点点改进：任何用户名的相同路径是%appData%/../Local/Google/Chrome/User Data/Default
Chrome 中更简单的解决方案是右键单击并选择检查（或 CTRL+SHIFT+I），然后单击并按住刷新按钮。将出现一个菜单，其中包含刷新、硬重新加载或清空缓存和硬重新加载选项。通常 Hard Reload 会这样做，但如果由于某种原因顽固，Empty Cache 和 Hard Reload 肯定会。
在 Linux 上，您可以在以下位置找到这些文件：~/.config/google-chrome/Default

【解决方案25】：

它可能对少数人有用，但我遇到了同样的问题，发现它与文件权限有关，所以我给了它一个 777 权限并且它起作用了，当然在你确定问题之后在那里，确保将权限改回更安全的值。

【讨论】：

777 是一个糟糕的解决方案。向所有人授予写入权限是非常糟糕的做法。

【解决方案26】：

对于 macOS 上的 Chrome，如果您不想按照此处的建议删除整个 Chrome favicon 数据库，则可以仅删除冲突的图标：

退出 Chrome
加载网站图标数据库（此处使用 sqlite）：

sqlite3 ~/Library/Application\ Support/Google/Chrome/Default/Favicons

搜索导致问题的文件

select * from favicons where url = 'http://mysite.dev/favicon.ico';

如果您对输出感到满意：

delete from favicons where url = 'http://mysite.dev/favicon.ico';

或者，您可以搜索可重复使用的模式以删除多个条目：

搜索导致问题的多个文件

select * from favicons where url like 'http://mysite.dev%';

如果您对返回的结果感到满意：

delete from favicons where url like 'http://mysite.dev%';

输入.exit并回车退出sqlite
重启 Chrome

【讨论】：

【解决方案27】：

我知道这是一个非常古老的问题，但它仍然是一个相关的问题，尽管这些天只适用于 mozilla。（我不知道资源管理器是做什么的，因为我们不为非标准浏览器编写代码）。

如果在标题中包含图标标签，Chrome 的表现就很好。

尽管 Mozilla 很清楚这个问题，但像往常一样，他们从不解决烦人的小问题。甚至 6 年后。

因此，有两种方法可以强制使用 firefox 刷新图标。

让所有客户端卸载 Firefox。然后重新安装。
仅在 url 栏中手动键入域 - 不要使用 http 或 www 只是域 (mydomain.com)。

这当然假设您的 ns 记录仅包含对域名的解析。

【讨论】：

【解决方案28】：

这适用于 Chrome：

在 Mac 上：删除文件

${user.home}/Library/Application Support/Google/Chrome/Default/Favicons
在 Windows 上：删除文件

C:\Users[用户名]\AppData\Local\Google\Chrome\User Data\Default\Favicons C:\Users[用户名]\AppData\Local\Google\Chrome\User Data\Default\Favicons-journal

source

【讨论】：

【解决方案29】：

只需更改此文件名='favicon1.ico'

【讨论】：

【解决方案30】：

Chrome 版本：68.0.3440.106

只需重新启动 Chrome（在您的地址栏中）： chrome://restart

【讨论】：