Search code examples
ruby-on-rails-4favicon

How to use multiple favicon.ico sizes with favicon_link_tag helper in rails 4


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?


Solution

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