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

如果找到它，請將其刪除。

除了它的潛在軌道太聰明，並意識到文件名/文件類型不正確並附加鏈接。