Question

我已经看过针对StackOverflow上其他类似问题提出的其他解决方案，我似乎无法在Chrome中为我的Rails页面显示我的favicon（至少在桌面上，它适用于我的Chrome iPad奇怪）。

我已经尝试将它作为.ico，作为.png，并且目前将其作为响应类似问题的建议的Base64字符串。所有这些都在Firefox中有效，但在Chrome中不起作用。

使用Heroku部署页面，link href标记位于head标记中。

页面位于https://www.resnate.com。

编辑：代码：

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

Answer 1

我知道这个问题已经有两年了，但是由于我一直在为这个确切的问题苦苦挣扎超过3个小时，因此在网上没有找到解决方案的问题（我正在做所有建议的各种尝试），我只是突然使它起作用，我想我将发布自己的经验，以防万一我可以将痛苦减轻到下一个受害者。

我的设置与OP的设置完全相同：除了Chrome之外，每个浏览器中都显示一个图标图标的Rails应用。我试图遵循@toddmetheny的答案，但没有成功。

事实证明，当我正在使用此应用程序时，在<head>内加载了很多脚本，因此在其中放置图标图标<link>至关重要。我真的不知道为什么会发生这种情况（如果有人可以确认或破坏我的理论，将不胜感激），但是我猜想Chrome浏览器正在加载这些脚本时，因为尚未找到任何<link>标签引用网站图标时，它会请求默认的/favicon.ico。在查看“网络”标签时，我注意到了这一点：Chrome总是请求/favicon.ico，而其他浏览器却按预期请求了<link>标记中引用的浏览器。

我不知道这是否可能是导致OP问题的原因（正如我所见，他也加载了一些脚本），但是解决方案很简单，只需将favicon_link_tag块移至{{ 1}}，紧随<head>标签之后。

希望这可以帮助一些绝望的人！

Answer 2

尝试使用rails helper favicon_link_tag。

确保您的图标已保存在app/assets/images中。清除浏览器缓存以确保使用最新版本。

Favicon无法在Chrome中显示（基于Rails的页面）

2 个答案: