Search code examples
iosruby-on-railsmobile-safarifavicon

Generating apple-touch-icon using Rails


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.


Solution

  • 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.