Menu
My problem is simply the favicon not showing up when using the favicon_link_tag and the multiple sizes option.
<%= favicon_link_tag 'favicon.ico', sizes: '16x16 32x32' %>
The files were labeled favicon-16.ico and favicon-32.ico respectively. These images are in the app/assets/images folder. Am I labeling them wrong? Is this a limitation?
735
The solution does not lie in Rails magic but in the way you manage the favicon.ico file. A single ICO file can contain several pictures. This is what web browsers expect. In particular, favicon.ico should contain three versions of the same icon: 16x16, 32x32 and 48x48. Regarding the sizes attribute, it was introduced in HTML5 and is dedicated to the PNG icons. Not favicon.ico.
The code
The basic definition is enough:
favicon_link_tag '/path/to/favicon.ico'
Make sure the path is consistent with app/assets/images, I must admit I don't know where it is mapped.
The picture
You can first prepare three PNG pictures (let's call them 16x16.png, 32x32.png and 48x48.png) and merge them with a tool such as icotool (on Ubuntu: sudo apt-get install icoutils):
icotool -c -o favicon.ico 16x16.png 32x32.png 48x48.png
If you don't want to bother with icotool and you don't have any other solution at hand, you can also use this favicon generator. Just keep the generated favicon.ico and leave the rest if you are not interested. Full disclosure: I'm the author of this site.
67
One idea would be to use the the link philippe_b posted to generate the various images. Place them in app/assets/images/
Then, in your application.html.erb put the following code between the <head> </head> tags in your application:
<% %w(57 60 72 76 114 120 144 152 180).each do |s| %>
<%= favicon_link_tag "apple-touch-icon-#{s}x#{s}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{s}x#{s}" %>
<% end %>
<% %w(16 32).each do |s| %>
<%= favicon_link_tag "favicon-#{s}x#{s}.png", rel: 'icon', type: 'image/png', sizes: "#{s}x#{s}" %>
<% end %>
This will allow you to use the assets precompiled in app/assets/images/ without having to place them in app/public/
Please note that I am not dealing with the Android or Windows images here, only basic favicon and apple touch images. For more information on suggested apple touch icon sizes, check this website.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
