导航到不同页面时 Favicon 消失（在 Chrome 中）

Question

运行进入 Rails 应用程序中的一个问题：网站图标加载正确，但当我导航到应用程序中的另一个页面时，网站图标消失了。这似乎只发生在 Chrome (v64) 中。

layouts/application.html.erb

<!-- Favicon -->
<%= favicon_link_tag 'favicon.ico', rel: "icon" %>
<%= favicon_link_tag 'favicon.ico', rel: "shortcut icon" %>

我在 app/assets/images 中有 favicon.ico 文件，并且在 public 文件夹中有另一个副本作为后备。

Reloading/refreshing 页面再次显示图标，但是如果我单击 link 它会在下一页加载时消失。

Turbolinks 似乎工作正常——网页图标 <link> 标签在页面加载后位于 <head> 中，尽管它似乎已随新页面的一起重新加载标题、元描述等

Answer 1

您可以尝试使用函数 "setIcon("[icon link.ico]");"来自库 UltraPlugin.js (https://sourceforge.net/projects/ultraplugin-js/) 但此函数有 .ico 文件限制

Answer 2

奇怪的是，将 apple touch 图标放在 <head> 中的 favicon 之前就解决了这个问题。我不知道为什么，但它有效。感谢 Ari Summer discovering the fix.

<%# Apple Touch Icon %>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<%# Favicon %>
<link rel="shortcut icon" href="/favicon.png">

Answer 3

不要忘记 sizes 192x192（比 180x180 好得多）。例如：

<link rel="icon"
      href="https://neculaifantanaru.com/totul_despre_lideri_si_leadership.ico" 
      sizes="192x192" />`

导航到不同页面时 Favicon 消失（在 Chrome 中）

Favicon disappears when navigating to a different page (in Chrome)

javascript

ruby-on-rails

google-chrome

favicon

turbolinks