使用Rails生成apple-touch-icon

Question

I am trying to add the apple-touch-icon link to my application head so that it will be displayed on homescreen bookmarks. The Rails guides state the following:

Mobile Safari looks for a different link tag, pointing to an image that will be used if you add the page to the home screen of an iOS device. The following call would generate such a tag:

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" />

However when I use the following (timestamps removed):

<%= favicon_link_tag 'favicon.ico' %>
<%= favicon_link_tag 'apple-icon.jpeg', rel: 'apple-touch-icon', type:'image/jpeg' %>

it does not correctly generate the apple-touch-icon (favicon works as expected). It inserts "images" and not "assets" into the href. The code generated is:

<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">

I have also tried just putting the link right into the application file without using the TagHelper, but it doesn't append the timestamp to the file, so the file isn't correct.

Answer 1

You can create a _favicon.html.erb partial with the following content:

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

Include it in your application.html.erb :

<%= render 'favicon' %>

This will create apple touch icons and favicons in different sizes (optimized for different devices). You can then generate these icons via one of the many websites out there such as iconifier and place them in your app/assets/images/ directory.

This is what I've done and it works really well for me.

Answer 2

Firstly, apple touch icons need to be in PNG format, not JPEG. They should also be named 'apple-touch-icon'.

As for the problem, the first but not ideal solution is to place your apple icon into your public directory and hard code the link.

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

Alternatively on that same note you could add it /public/images so that the generated link is correct.

I suspect however that a plugin such as bootstrap is appending the link as it sees fit. In the case you are using bootstrap or something similar I would be searching the HAML for 'apple-touch-icon' and seeing what you can find. Most probably something along the lines of:

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

If you find it, remove it.

That aside its potentially rails being too smart and realising that the filename/filetype are incorrect and appending the link.