使用 Rails 生成 apple-touch-icon

Question

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

Mobile Safari 会寻找不同的链接标签，它指向将在您将页面添加到 iOS 设备的主屏幕时使用的图像。下面的调用会生成这样一个标签：

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 按预期工作）。它将“图像”而不是“资产”插入到 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' %>

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

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

Answer 2

首先，苹果触摸图标需要是 PNG 格式，而不是 JPEG。它们也应该被命名为“apple-touch-icon”。

对于这个问题，第一个但不是理想的解决方案是将你的苹果图标放入你的公共目录并硬编码链接。

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

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

但是，我怀疑诸如 bootstrap 之类的插件会在它认为合适的时候附加链接。如果您使用引导程序或类似的东西，我会在 HAML 中搜索“apple-touch-icon”并查看您能找到什么。很可能是这样的：

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

如果找到了，请删除它。

除了它的潜在轨道太聪明并意识到文件名/文件类型不正确并附加链接之外。