Generating apple-touch-icon using Rails

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.