3

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.

Andrew
  • 472
  • 2
  • 24
  • Are there any errors in the JavaScript console (for example, the favicon asset failing to load?) – Sidney Feb 06 '18 at 21:18
  • @Sidney, no errors in the JavaScript console. The favicon flashes for a second and then disappears, which leads me to think something is going on with Turbolinks. – Andrew Feb 06 '18 at 21:24
  • Does the page you're navigating to use application.html.erb as the layout? If you're using a second layout for that particular page, that could be why. – gwalshington Feb 06 '18 at 22:03
  • @gwalshington, I'm using the main application.html.erb layout for all pages. The odd thing is that the `` with the favicon is in the head on the subsequent page(s), but Chrome doesn't seem to recognize it. – Andrew Feb 06 '18 at 22:22
  • @Andrew this happened to me before, and it was just a cache issue - i'm sure you're confirmed that isn't the case? Also - I found this question where someone commented that Chrome doesn't display favicons on local dev server - is it only happening locally? https://stackoverflow.com/questions/16375592/favicon-not-showing-up-in-google-chrome – gwalshington Feb 06 '18 at 22:24
  • @gwalshington, thank you for the diligence. It isn't a cache issue, and it's happening on both dev and production unfortunately. – Andrew Feb 06 '18 at 22:28
  • @Andrew Production? Is the site live and accessible, for review? – philippe_b Feb 08 '18 at 08:34

3 Answers3

3

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">
Andrew
  • 472
  • 2
  • 24
0

You can try to use the function "setIcon("[icon link.ico]");" from the library UltraPlugin.js (https://sourceforge.net/projects/ultraplugin-js/) but this function have .ico files limitation

Gadget Master
  • 16
0

Don't forget sizes 192x192 (much better than 180x180). For example:

<link rel="icon"
      href="https://neculaifantanaru.com/totul_despre_lideri_si_leadership.ico" 
      sizes="192x192" />`
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
Just Me
  • 864
  • 2
  • 18
  • 28