使用 Rails 生成苹果触摸图标

Question

我正在尝试将 apple-touch-icon link 添加到我的应用程序头部，以便它显示在主屏幕书签上。 Rails 指南声明如下：

Mobile Safari looks for a different link tag, pointing to an image that will be used if you add the page to the home screen of an iOS device. The following call would generate such a tag:

favicon_link_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png'
<link href="/assets/mb-icon.png" rel="apple-touch-icon" type="image/png" />

然而，当我使用以下内容时（删除了时间戳）：

<%= favicon_link_tag 'favicon.ico' %>
<%= favicon_link_tag 'apple-icon.jpeg', rel: 'apple-touch-icon', type:'image/jpeg' %>

它没有正确生成 apple-touch-icon（favicon 按预期工作）。它将 "images" 而不是 "assets" 插入 href。生成的代码是：

<link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<link href="/images/apple-icon.jpeg" rel="apple-touch-icon" type="image/jpeg">

我也试过直接将 link 放入应用程序文件而不使用 TagHelper，但它没有将时间戳附加到文件，因此文件不正确。

Answer 1

首先，apple touch 图标需要是 PNG 格式，而不是 JPEG。它们也应该命名为 'apple-touch-icon'.

至于问题，第一个但不是理想的解决方案是将苹果图标放入 public 目录并硬编码 link.

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

或者，您可以在同一条注释上添加它 /public/images，以便生成的 link 是正确的。

不过我怀疑 bootstrap 之类的插件会在其认为合适的情况下附加 link。如果您使用 bootstrap 或类似的东西，我会在 HAML 中搜索 'apple-touch-icon' 并查看您能找到什么。很可能是这样的：

 %link{:href => "images/apple-touch-icon.png", :rel => "apple-touch-icon"}

如果找到，请将其删除。

除此之外，它可能 rails 太聪明了，意识到 filename/filetype 不正确并附加了 link。

Answer 2

您可以使用以下内容创建 _favicon.html.erb 部分：

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

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

将其添加到您的 application.html.erb:

<%= render 'favicon' %>

这将创建不同大小的 Apple Touch 图标和网站图标（针对不同设备进行了优化）。然后，您可以通过 iconifier 等众多网站之一生成这些图标，并将它们放在 app/assets/images/ 目录中。

这就是我所做的，对我来说效果很好。

使用 Rails 生成苹果触摸图标

Generating apple-touch-icon using Rails

ios

ruby-on-rails

mobile-safari

favicon