rails favicon 图标在 Firefox 中有效，但在 Chrome 中无效？答案

【问题标题】：rails favicon icon works in Firefox but not Chrome?rails favicon 图标在 Firefox 中有效，但在 Chrome 中无效？
【发布时间】：2014-08-04 22:47:11
【问题描述】：

Rails 代码 (HAML)：

= favicon_link_tag 'favicon.ico'

favicon.ico 位于

app/assets/images/favicon.ico

它在 Firefox 中本地和远程（在生产中）工作，但对于本地和远程 Chrome 都没有显示图像

在任一浏览器中查看生产源代码：

<readyhead>
...

<link href="/assets/favicon-2d05a112081aa8cc9c3caa576862077d.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
...
</readyhead>

在任一浏览器中查看开发源代码显示：

<readyhead>
...
<link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
...
</readyhead>

我没有 IE，但你可以在 http://www.railslinks.com 看到它（我很想知道！）

【问题讨论】：

<readyhead>是个什么鬼？用<head> 替换它，你应该很高兴。

标签： ruby-on-rails ruby ruby-on-rails-3 hyperlink favicon

【解决方案1】：

如果您使用 chrome 开发工具检查您的页面源代码，您可以看到 Chrome 如何解析您的 HTML：

<html>
  <head>
    <style type="text/css">
    </style>
  </head>
  <body>
    <readyhead>
      <!-- some more stuff ... -->

      <link href="/assets/favicon-2d05a112081aa8cc9c3caa576862077d.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
    </readyhead>

    <!-- some more stuff ... -->
  </body>
</html>

问题在于 <readyhead> 不是有效的 HTML 元素，因此 Chrome 会创建一个单独的 <head> 元素作为替换，并假定 <readyhead> 属于 <body> 标记内。

要解决此问题，您必须将 <readyhead> 重命名为 <head>，然后 Chrome 才能正确解析您的 HTML。无论如何，这个元素应该是什么？它不是有效的 HTML。

【讨论】：

This question 似乎是相关的。