Lomefin Lomefin - 6 months ago 46
HTML Question

How to add multiple favicons in rails

Instead of a single favicon.ico I've made with http://www.favicomatic.com/ some other versions of the file, so I can get the favicon as .ico, .png's and the mobile and windows versions as well.

Rails' got a very simple way to add the favicon using

favicon_link_tag 'myicon.ico'

But what about the other headers?


Favicomatic gives out a HTML template of how the links should look

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />

So we must end with something like that, so the favicon_link_tag must be overloaded. Following the favicon_link_tag documentation:

favicon_link_tag 'apple-touch-icon-57x57.png', rel: 'apple-touch-icon', type: 'image/png'

Mixing both we get something like this:

<%= favicon_link_tag 'favicon/favicon.ico' %>

<% [57,72,60,76].each do |size| %>
  <%= favicon_link_tag "favicon/apple-touch-icon-#{size}x#{size}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{size}x#{size}" %>
  <%= favicon_link_tag "favicon/apple-touch-icon-#{size * 2}x#{size * 2}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{size * 2}x#{size * 2}" %>
<% end %>

<% [16,32,96,196].each do |size| %>
  <%= favicon_link_tag "favicon/favicon-#{size}x#{size}.png", type: 'image/png', sizes: "#{size}x#{size}" %>
<% end %>

<%= favicon_link_tag "favicon/favicon-128.png", type: 'image/png', sizes: "128x128" %>

<meta name="application-name" content="My App"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />

<% [70,150,310].each do |size| %>
  <meta name="<%= "msapplication-square#{size}x#{size}logo"%>" content="<%= asset_path("favicon/mstile-#{size}x#{size}.png")%>" />
<% end %>
<meta name="msapplication-wide310x150logo" content="<%= asset_path("favicon/mstile-310x150.png")%>" />
<meta name="msapplication-TileImage" content="<%= asset_path("favicon/mstile-144x144.png")%>" />

This considers that your favicon assets are in a directory inside assets/images in your rails app.

Additional to your favicon is Windows Tile Metadata in case someone adds your site as a Windows App. So remember to put your App name and primary color as well.