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

Issue

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">

Answered By – Andrew

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published