Creating an apple-touch icon using Rails

Question

I am trying to add the apple-touch-icon link to my application title so that it appears in the bookmarks of the main screen. Rails guides indicate the following:

Mobile Safari looks for another link tag, pointing to the image that will be used if you add the page to the home screen of your iOS device. The following call will 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 (deleted timestamps):

 <%= 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” rather than “assets” in href. Generated Code:

 <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 also tried to just put the link directly in the application file without using TagHelper, but it does not add a timestamp to the file, so the file is incorrect.

Answer 1

First, Apple touch icons must be in PNG format, not JPEG. They should also be called "apple-touch-icon".

Regarding the problem, the first, but not ideal solution is to place the icon of your apple in your public directory and hard-code the link.

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

Alternatively, in the same note, you can add it / public / images so that the generated link is correct.

I suspect, however, that a plugin, such as bootstrap, adds the link as it sees fit. In case of using bootstrap or something similar, I would look for HAML for "apple-touch-icon" and see what you can find. Most likely something like:

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

If you find it, delete it.

This is to the side of its potential rails that are too smart and understand that the file name / file type is incorrect and adding links.

Answer 2

You can create _favicon.html.erb parts with the following contents:

 <% %w(76 120 152 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 badges and badges for Apple touch in different sizes (optimized for different devices). You can then generate these icons through one of the many websites, such as iconifier , and place them in the app / assets / images / folder.

This is what I did, and it works great for me.