Flask favicon 无法在 Google Chrome 上运行答案

【问题标题】：Flask favicon won't work on Google ChromeFlask favicon 无法在 Google Chrome 上运行
【发布时间】：2018-09-25 16:04:43
【问题描述】：

在我的一生中，我无法让我的 Favicon 在 Google Chrome 中工作。它适用于 IE 和 Firefox。当我在本地主机上时，它有时（？）在 Google Chrome 中工作。一旦我部署它，我永远无法让它出现。

我的 HTML 中有这个：

<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

我根据我读过的其他一些帖子将它放在我的主 Py 文件中：

@app.route('/favicon.ico')
def favicon():
    return send_from_directory(os.path.join(app.root_path, 'static'),
                               'favicon.ico', mimetype='image/vnd.microsoft.icon')

如果我转到 /static/favicon.ico，它会显示出来。如果我只访问 favicon.ico，它就会出现。我已经清除了我的缓存和 cookie 一千次。我什么都试过了。它不会出现。

我没有收到任何错误消息，但是在浏览器控制台中，如果我直接转到 Favicon 页面，它确实会这样说：

Resource interpreted as Document but transferred with MIME type image/x-icon: "http://localhost:5555/static/favicon.ico".

也许这暗示出了什么问题？

发生了什么事？

【问题讨论】：

标签： html google-chrome flask favicon

【解决方案1】：

尝试将图标从 favicon.ico 重命名为其他名称 .ico（例如 icon.ico），我知道这看起来很奇怪，但它应该可以工作

【讨论】：

还是不行。有趣的是我现在得到了这个错误：127.0.0.1 - - [25/Sep/2018 11:30:05] "GET /favicon.ico HTTP/1.1" 404 - 我什至没有在我的整个过程中引用 favicon.ico项目了，但它仍然在那里寻找它？这甚至没有意义。我不知道发生了什么事，这太令人沮丧了，以至于我浪费了应该花在开发上的时间来试图让愚蠢的图标出现。
Google chrome 总是默认寻找 favicon.ico，忽略警告，我有使用 Grails 开发的我自己的项目之一的经验。这是一个最近修复的错误，你应该更新你的谷歌浏览器，更多信息请看这里：stackoverflow.com/questions/1003350/…
寻找/favicon.ico是IE首先引入的约定，几乎所有浏览器都遵循。当 HTML 中没有明确声明网站图标时，通常会发生这种情况。

【解决方案2】：

我遇到了同样的问题，但我只需将 favicon 重命名为 scon（任何其他名称）并将 .ico 文件保存在静态文件夹中并确保名称与文件名相同即可清除。（使用谷歌浏览器）

<head>
<title>My Webpage</title>
<link  rel ='stylesheet'type="text/css" href="./static/style.css">
<link rel="shortcut icon" href="{{ url_for('static', filename='scon.ico') }}">
</head>

【讨论】：

【解决方案3】：

TL;博士

确保您的head 中没有body-only 标记（例如div、p...）。

详细介绍

“works-everywhere-but-Chrome”问题通常是由于 Chrome 的特定行为导致 HTML 页面的 head 部分中的无效标记。

当 Chrome 发现 head 中没有预期的标记时（例如，div：此标记应仅出现在 body 中），它认为 head 已关闭，以下标记是因此被视为在body 中，无论原始HTML 说什么。并且由于 Chrome 忽略了 link 标记，当它们位于 body 中时，就好像根本没有声明 favicon。

解决此问题的两种方法：

查看 HTML 页面的 head 部分。提示：不要浏览您的代码，也不要使用 Chrome DevTools 浏览页面的元素。相反，请使用查看页面源代码来真正查看原始 HTML。
您可以将您的页面提交到W3C Validator。如果您的 head 中有 body-only 标记，验证器将报告它。

【讨论】：

感谢您的帮助。我的头部看起来不错。它只是一些脚本和网站图标的链接。我觉得我什么都试过了。我什至可以让它在本地主机上工作，但我无法在部署时让它工作。我即将准备好忍受 Chrome 用户被一个丑陋的图标困住，因为我不知道还能去哪里。
如果您的网站已经上线，您能否指出它的网址？您还可以运行网站图标检查器：realfavicongenerator.net/favicon_checker。完全披露：我是这项服务的作者。
它是实时的，但它需要用户从我公司的 Azure Active Directory 帐户登录才能访问它。不幸的是，这意味着您的网站也无法运行，因为它只会测试 Microsoft 的登录页面，而不是实际的网站。
我明白了。正如另一个答案中提到的，网站图标缓存是一个常见的嫌疑人。我强烈建议您刷新缓存（不仅按 F5），甚至请同事使用他自己的 Chrome 访问该站点。
刚刚在另一台工作计算机上尝试过，我知道它没有被使用过并且没有工作，所以我认为这消除了缓存问题。它与 Azure webapp 没有任何关系，不是吗？我认为他们仍然可以拥有网站图标。

【解决方案4】：

尝试在您的 HTML 的 head 部分中放置类似的内容，我遇到了同样的问题：

<link rel="icon" type="image/png" sizes="32x32" 
  href="{{ url_for('static', filename='favicon-32x32.png') }}">

如果您有其他尺寸，您可以添加其他尺寸，访问您网站的设备将选择最适合它们的设备。

之后，请务必再次清除缓存。这是一个StackOverflow answer，有一些很好的方法来做到这一点。

【讨论】：

感谢您的帮助。我试过了，但没有用。我觉得我什么都试过了。我什至可以让它在本地主机上工作，但我无法在部署时让它工作。我即将准备好忍受 Chrome 用户被一个丑陋的图标困住，因为我不知道还能去哪里。
快速提问：您是否尝试过从 Chrome 隐身标签页加载网站？您是否检查过用于智能手机的 Chrome 上是否仍然没有显示图标，您可能还没有加载该网站？如果是这样，那么您可以完全排除令人讨厌的缓存问题
是的，我使用了隐身模式。我刚刚尝试从我的智能手机使用 Chrome 登录，但它也不起作用。然后我在另一台工作计算机上尝试了它，我知道它以前从未连接过它也没有工作。它与 Azure webapp 没有任何关系，不是吗？我认为他们仍然可以拥有网站图标。
我不确定。你说当你导航到/favicon.ico 时你可以看到图像。根据我的经验，我不需要在 Flask 中为标准图标图像指定路线。尝试注释掉 Flask 路由，使用我在答案中建议的链接标签类型，看看是否有任何变化。这是一个艰难的...

【解决方案5】：

转到你的模板，你应该有这样的东西：

link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"

删除行，保存，刷新页面（应该没了）。再次将该行放入模板中。刷新。应该更新了

【讨论】：