ios - 使用 Rails 生成苹果触摸图标

Question

我正在尝试将 apple-touch-icon 链接添加到我的应用程序头部，以便它显示在主屏幕书签上。 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 按预期工作)。它将“图像”而不是“ 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">

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

Answer 1

您可以创建一个包含以下内容的 _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/目录中。

这就是我所做的，它对我来说非常有效。