使用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 这样的插件正在附加它认为合适的链接。如果您使用 bootstrap 或类似的东西，我会在 HAML 中搜索“apple-touch-icon”并看看您能找到什么。最有可能的是：

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

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

除此之外，它可能过于智能并意识到文件名/文件类型不正确并附加链接。