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

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

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

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

或者在同一个音符上添加/ public / images，以便生成的链接正确。

但我怀疑像bootstrap这样的插件正在附加链接，因为它认为合适。如果您正在使用bootstrap或类似的东西，我会在HAML中搜索“apple-touch-icon”并查看您可以找到的内容。最有可能是：

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

如果找到它，请将其删除。

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

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

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

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