Favicon not displaying in Chrome (Rails-based page)

Question

I've had a look at other solutions proposed to other similar questions on StackOverflow and I can't seem to get my favicon to display for my Rails page in Chrome (at least on the desktop, it works for Chrome on my iPad weirdly).

I've tried having it as an .ico, as a .png, and currently have it as a Base64 string as proposed in response to a similar question. All of these work in Firefox, but will not work in Chrome.

The page is deployed using Heroku, and the link href tag is in the head tag.

The page is at https://www.resnate.com.

EDIT: Code:

<head>
    <meta property="og:title" content="Resnate: The Music Social Network." />
    <meta property="og:description" content="Music, Gigs and Merch." />
    <meta property="og:image" content="/assets/previewimg2-c6c3bbb488ce1d2360bb605f93adc8421afe44813c1de1e324aa008858dbba18.png" />
    <title>Resnate: Music, Gigs, Merch.</title>
    <link rel="stylesheet" media="screen" href="/assets/application.self-a2388fc8a11c59fee992af9cba7099a53de4bd515465610aa19c43a3b90054f6.css?body=1" data-turbolinks-track="true" />
    <link href='//fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
    <script src="/assets/jquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-d602bdfe68ffc63b9f9cc512872aa3cfff046228a0a36e90dd476e8ef54c1b09.js?body=1" data-turbolinks-track="true"></script>
    <script src="https://js.pusher.com/2.2/pusher.min.js"></script>

    <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAABYlAAAWJQFJUiTwAAAACXZwQWcAAAAgAAAAIACH+pydAAAC8klEQVRYw+2XsWscRxSHv5nZ273bVRw43BrLcEIGkwgRY8g/YHDhwq3BpcvgwrhyYRUOuFGVMmXAJJCgQn+Cgw3BRpGNweJUyE5njLGk273bvZt5KeZ0J4WTtCffKY1fuey83zfvzbx5TzXv3JPO1lt0GIIAiulaX8MVBdXZ8wSdrbe0N5qoKEK6vSmre1OVAMlzAAIdhqgoQlermHrsI+DcFEIhoDUI2CzDAToMCRCQbg9Tj7n4y89U6nUIDEpNFkBEoGfpfvzIm1u3sbstEAgGG1UQfH0GjKHd3ERp46knE3TEWWqNhtfYrzn4xzlUFNFubvL6xk10NQKlPjsSIgIiuE7OpZXH1OYa/RR7GwLgxZQ26GqErtVwaYbNczgphAg6itBJ7BX0XmqH/oIRq0ApXJpx9sZ1znx/BZumoPSY4g6TJOw8+4sPK6tgNKNSGoxaq5TCFgUzi99Sv3YV6fVQQXCc5EH9/hrX6fD+tz8wcW3kf0d6FWsB2Fr6kWyjiUmSUuI2TYnn57jw8MHAx2F29Lb6Yc82Nmm9+BsVVrCt9NCDKSKYmQQpugzyfEzqSsXVJDEqrPDV4gIzl7/zVUz/B8IJKopoPX/B7to6pn/wjrPSiXVpRrLwDefu/jDyTOx9e/dome0/n5V1Wx5gb5fAyLyKtR7KjVe8xgPoh10Zc/it0OPVjDEv9+TtC8CXQ1gaQCcx6for/ln+6chClK6/Grx+EwOwaYYUXXbX1vn05GmpUmzTbAIA4huHeL4ByJiPUeOAjxMBKGMAmF26f6LneL+PsQBEBB2GtNZeoqvVz2pIWmsv0WHoW7NyAMq3UknMh5VV3v/6+0RaMtduM6rV3wcgiAjiLK7jhwaMLv2sHs4guHYb18kRZ/uRGEZjCKA1kufUGg0urTyeWlvur/AwncFAQ6C3vUOlXqc215jaYNLb3mG/ZoDys5rNMt7cun1qo5mqBH4wcUWB5DkO/Lh0CrY3nLqiIKjOngf438bzfwFHKVzQwuVyewAAAFl6VFh0U29mdHdhcmUAAHja88xNTE/1TUzPTM5WMNMz0rNQMDDVNzDXNzRSCDQ0U0jLzEm10i8tLtIvzkgsStX3RCjXNdMz0rPQT8lP1s/MS0mt0Msoyc0BAK1OGKx0FS5rAAAAIXpUWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzAAB42jMEAAAyADIMEuKEAAAAInpUWHRUaHVtYjo6SW1hZ2U6OmhlaWdodAAAeNozNLIwAgACAADOvq1X/gAAACF6VFh0VGh1bWI6OkltYWdlOjpXaWR0aAAAeNozNLIwAQACAgDQ2j98IAAAACJ6VFh0VGh1bWI6Ok1pbWV0eXBlAAB42svMTUxP1S/ISwcAEXsDeF85R+IAAAAgelRYdFRodW1iOjpNVGltZQAAeNozNLY0NjcyNTI3BAALOQIJ9tf2MgAAABl6VFh0VGh1bWI6OlNpemUAAHjaM7LMTgIAAq8BOcs8cVIAAAAcelRYdFRodW1iOjpVUkkAAHjaS8vMSbXS19cHAAyaAmiUQFGqAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="nM46FYSVzSqJFGHsAMGU/IrPXSNExiq25L5Q7vJp2ZP+f3uj1u9isqrpgNna/mAl1X0eABdwsP6YYt8qzgDHTA==" />
    <!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  </head>

If you look at the page source in Chrome, there is no favicon defined. The favicon is not being rendered to html in Chrome , that's why you don't see the favicon. — Elvn, Apr 07 '16 at 21:56
I'm not sure I follow? I had a favicon defined before but now I have the favicon as a base64 string (towards the end of the code in the post above). I tried clearing the cache, having it as "favicon.ico", ".png", etc., none of those worked. — Amir, Apr 07 '16 at 22:19

score 1 · Answer 1 · answered Dec 04 '18 at 12:58

I know this question is two years old now, but as I have been struggling with this exact problem for 3+ hours surfing the net without finding a solution to my case (I was doing everything people suggested in all its flavors) and I have just suddenly make it work, I think I'm going to post my experience just in case I can save the pain to the next victim.

My setup was exactly the same as OP's: Rails app with a favicon displaying in every single browser but Chrome. I tried to follow @toddmetheny answer without success.

It turns out that as this app I'm working in loads a whole lot of scripts inside <head>, where you place the favicon <link> tags becomes important. I don't really know why this happens (would be much appreciated if someone could either confirm or destroy my theory), but I guess that while Chrome is loading those scripts, as it has not yet found any <link> tag referencing a favicon, it requests the default /favicon.ico. I noticed this while looking at the Network tab: Chrome always requested /favicon.ico while the other browsers requested the one referenced in the <link> tag as expected.

I don't know if this might have been the cause to OP's problem (as I see he loads some scripts too), but the solution was as simple as moving the favicon_link_tag block to the top of <head>, just after <meta> tags.

Hope this helps some desperate folks out there!

toddmetheny · Answer 2 · 2016-04-07T22:31:42.810

0

Try using the rails helper favicon_link_tag.

Make sure your icon is saved in app/assets/images. Clear your browser cache to ensure you're using the latest.

edited Apr 07 '16 at 22:31

answered Apr 07 '16 at 21:55

toddmetheny

4,405
1
22
39

I tried that, which resolves to ``, still no joy, but if I click on that link when viewing the source it displays the favicon in a new tab just fine. – Amir Apr 07 '16 at 22:23
Is your favicon saved in `app/assets/images`? – toddmetheny Apr 07 '16 at 22:26
Do you also have a copy in `public/assets`? – toddmetheny Apr 07 '16 at 22:28
Cleared cache "since beginning of time" according to Google, opened in incognito mode tab just to be sure, have it saved in both app/assets/images and public/assets. – Amir Apr 07 '16 at 22:33
Is 32x32 size, if that makes any difference? – Amir Apr 07 '16 at 22:33
Open up the chrome dev tools `cmd+option+j` on a mac. Click on the `Network` tab and make sure the resource is being requested. – toddmetheny Apr 07 '16 at 22:36
Also--could you post your code that includes `favicon_link_tag`? – toddmetheny Apr 07 '16 at 22:39
Here is the resolved favicon_link_tag: `` – Amir Apr 07 '16 at 22:42
Couple things...(1) edit that name (2) use the rails helper method...that's the code I want to see. – toddmetheny Apr 07 '16 at 22:43
Here is the rails helper method: `<%= favicon_link_tag 'favicon.ico' %>` – Amir Apr 07 '16 at 22:43
It shows in firefox for me but not chrome. But I need to update my chrome version, too. – toddmetheny Apr 07 '16 at 22:45
Yeah, it works in Firefox for me, and Chrome on my iPad. Cleared my cache again, still no joy :/ – Amir Apr 07 '16 at 22:47
Ok, hovering over the `favicon.ico` in the developer tools shows it linking to `resnate.com/favicon.ico` with no mention of the `assets` subdirectory, will see if changing link in Rails helper affects that. – Amir Apr 07 '16 at 22:49
Try changing the name and redeploying, it could tell chrome that the server has something different and avoid returning that 304. – toddmetheny Apr 07 '16 at 22:49
Tried `favicon3.ico`, saved it in root, app/assets, app/assets/images, public/assets, still no luck. – Amir Apr 07 '16 at 22:59
No worries, I might contact Heroku and see if they can figure it out. – Amir Apr 08 '16 at 00:18

Favicon not displaying in Chrome (Rails-based page)

2 Answers2