favicon - 如何强制刷新图标？

Question

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

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

score 2169 · Accepted Answer

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

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

score 847 · Accepted Answer

改编自lineofbird 的回答如下，您可以执行以下操作：

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

score 263 · Accepted Answer

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

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

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

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

score 60 · Accepted Answer

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

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

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

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

score 59 · Accepted Answer

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

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

score 57 · Accepted Answer

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

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

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

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

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

score 34 · Accepted Answer

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

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

score 17 · Accepted Answer

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

score 17 · Accepted Answer

好吧，开销是开销，但是是的，不是太大。

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

我的廉价解决方案是：

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

如果该序列不起作用，那么就会发生其他事情。

score 16 · Accepted Answer

16

在 MAC 上： ⌘</kbd> + Shift-R or hold down Ctrl and click the reload button in the browser.

于 2014-07-09T13:04:42.200 回答

score 10 · Accepted Answer

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

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

score 9 · Accepted Answer

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

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

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

score 9 · Accepted Answer

尝试在新标签中打开

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

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

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

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

score 8 · Accepted Answer

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

退出 Chrome
加载 favicons 数据库（在此处使用 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

score 7 · Accepted Answer

当您向 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:”标头，客户端浏览器将在该时间戳之后重新请求该图标。在进行积极开发时，您可以将过期时间戳设置为未来一两秒，并始终让它获取这个，尽管这是一个糟糕的长期计划。

score 7 · Accepted Answer

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

我写这个答案的印象是，这就是在谷歌浏览器中刷新网站图标所需要的。然而，事实证明这只在前五分钟左右有效，直到图标在 Chrome 的历史同步中不可挽回地丢失。

原始答案

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

假设您已经通过<link>页面中的元素定义了您的图标<head>，您可以通过在控制台中运行这个标准 JS 单线来做到这一点：

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

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

score 7 · Accepted Answer

7

铬版本：68.0.3440.106

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

于 2018-09-01T16:04:34.130 回答

score 4 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

如果不更改网站图标的名称，则无法强制用户获取新副本

score 2 · Accepted Answer

这是 chrome 错误的解决方法：将 rel 属性更改为样式表！不过保留原链接。奇迹般有效：

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

score 2 · Accepted Answer

这适用于 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

来源

score 1 · Accepted Answer

简单的，

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

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

我有一个解决方案：

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

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

score 1 · Accepted Answer

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

如果在标题中包含一个图标标签，Chrome 就会表现良好。

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

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

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

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

score 1 · Accepted Answer

1

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

于 2018-07-23T18:36:42.923 回答

score 0 · Accepted Answer

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

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

并不是：

images/favicon.ico

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

在文件路径的末尾使用查询字符串。每次构建的查询字符串变量值必须不同。

如果以前的构建是：

<link rel="icon" href="http://example.com/favicon.ico?v=v1" />

或者

<link rel="icon" href="http://example.com/favicon.ico?v=stringA" />

那么下一个构建应该是：

<link rel="icon" href="http://example.com/favicon.ico?v=v2" />

或者

<link rel="icon" href="http://example.com/favicon.ico?v=stringB" />

score -3 · Accepted Answer

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

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

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

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

score -3 · Accepted Answer

请按照以下步骤更改应用程序图标：

在项目中添加您的 .ico 文件。
转到 angular.json 并在“projects”->“architect”->“build”->“options”->“assets”中为您的图标文件创建一个条目。请参阅 favicon.ico 的现有条目以了解如何操作。
转到 index.html 并更新图标文件的路径。例如，

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

或者，将您的图标文件重命名为 favicon.ico 并在目录中替换它。

重新启动服务器。
硬刷新浏览器，你很高兴。

score -5 · Accepted Answer

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

favicon - 如何强制刷新图标？

32 回答 32

尝试在新标签中打开

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

原始答案

Related

Reference