Question

在我生命中，我无法让我的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".

也许这暗示什么是错的？

这是怎么回事？

Answer 1

尝试将图标从favicon.ico重命名为其他.ico（例如icon.ico），我知道这似乎很奇怪，但应该可以使用

Answer 2

TL; DR

确保您的body中没有仅div的标记（例如p，head ...）。

详细信息

“ Chrome浏览器无处不在”的问题通常是由于Chrome浏览器在HTML页面的head部分中存在与无效标记有关的特殊行为。

Chrome浏览器发现head中不需要的标记（例如div：此标记应仅出现在body中）时，它将认为head要关闭，则无论原始HTML怎么说，以下标记都被认为在body中。而且由于Chrome在link中时会忽略body标记，因此好像完全没有声明该图标图标。

两种解决方法：

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

Answer 3

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

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

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

之后，请确保再次清除缓存。这是StackOverflow answer，其中提供了一些不错的方法。

Answer 4

转到您的模板，您应该具有以下内容：

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

删除行，保存，刷新页面（应该消失了）。将该行再次放在模板中。刷新。应该已经更新

Answer 5

我遇到了同样的问题，但我只是通过将图标图标重命名为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>

烧瓶图标无法在Google Chrome浏览器上运行

5 个答案:

TL; DR

详细信息