Question

我的问题只是使用favicon_link_tag和多个尺寸选项时不显示的图标。

<%= favicon_link_tag 'favicon.ico', sizes: '16x16 32x32' %>

文件分别标有favicon-16.ico和favicon-32.ico。这些图像位于app/assets/images文件夹中。我把他们贴错了吗？这是一个限制吗？

Answer 1

解决方案不在于Rails魔术，而在于你管理favicon.ico文件的方式。 A single ICO file can contain several pictures。这是Web浏览器所期望的。特别是，favicon.ico应包含同一图标的三个版本：16x16,32x32和48x48。关于sizes属性，它是在HTML5中引入的，专用于PNG图标。不是favicon.ico。

代码

基本定义就足够了：

favicon_link_tag '/path/to/favicon.ico'

确保路径与app/assets/images一致，我必须承认我不知道它的映射位置。

图片

您可以先准备三张PNG图片（让我们称之为16x16.png，32x32.png和48x48.png）并将其与icotool等工具合并（在Ubuntu上：{ {1}}）：

sudo apt-get install icoutils

如果您不想打扰icotool -c -o favicon.ico 16x16.png 32x32.png 48x48.png并且手头没有任何其他解决方案，您也可以使用此favicon generator。如果您不感兴趣，只需保留生成的icotool并保留其余部分。完全披露：我是这个网站的作者。

Answer 2

一个想法是使用张贴的link philippe_b来生成各种图像。将它们放在app / assets / images /

中

然后，在 application.html.erb 中，将以下代码放在应用程序中的<head> </head>标记之间：

<% %w(57 60 72 76 114 120 144 152 180).each do |s| %>
  <%= favicon_link_tag "apple-touch-icon-#{s}x#{s}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{s}x#{s}" %>
<% end %>

<% %w(16 32).each do |s| %>
  <%= favicon_link_tag "favicon-#{s}x#{s}.png", rel: 'icon', type: 'image/png', sizes: "#{s}x#{s}" %>
<% end %>

这样您就可以使用app/assets/images/中预编译的资产，而无需将其放在app/public/

中

请注意，我这里没有处理Android或Windows图像，只有基本的图标和苹果触控图像。有关建议的Apple触摸图标大小的更多信息，请check this website。

如何在rails 4中使用favicon_link_tag帮助程序使用多个favicon.ico大小

2 个答案: