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这样的插件会在它认为合适的时候附加链接。在你使用bootstrap或类似东西的情况下，我会在HAML中搜索“apple-touch-icon”并查看你能找到的内容。最有可能是：

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

如果找到，请将其删除。

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

使用Rails生成apple-touch-icon

2 个答案: