javascriptruby-on-railsgoogle-chromefaviconturbolinks

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


Running into an issue in a Rails app: the favicon loads properly but when I navigate to another page in the app the favicon disappears. This only seems to be happening in Chrome (v64).

layouts/application.html.erb

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

I have the favicon.ico file in app/assets/images, and I have another copy in the public folder as a fallback.

Reloading/refreshing the page displays the favicon again, but then if I click a link it disappears upon the next page load.

Turbolinks seems to be working fine–the favicon <link> tag is in the <head> after page load, though it seems to have been reloaded along with the new page's title, meta description, etc.


Solution

  • Oddly enough it turns out that placing the apple touch icons before the favicon in the <head> solves it. I have no clue why, but it works. Kudos to Ari Summer for 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">