CODEWITHSUNDEEP
javascriptruby-on-railsgoogle-chromefaviconturbolinks
Andrew
Andrew

Reputation: 472

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.

Upvotes: 3

Views: 2049

Answers (3)

Just Me
Just Me

Reputation: 1063

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

Upvotes: 0

Andrew
Andrew

Reputation: 472

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

Upvotes: 3

Gadget Master
Gadget Master

Reputation: 16

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

Upvotes: 0

Related Questions