Add favicon to rails app

You can add a favicon to your rails app simply by adding the following line inside your header tag in the application.html.erb file.

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

The code above references a file called favicon.ico located in the assets/images/favicons/ folder.

Dont have a favicon already?

If you don't already have a favicon, then there are a lot of resources out there to help.

I usually use https://favicon.io/ You can create your favicon from text, from an image, an emoji or find an premade logo on logohub.

Another option is to find one at https://www.favicon-generator.org/search/

How about touch icons

Do you need support for the apple touch icons too? Add your image in the root folder of your app. Then add the following:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

The code above will display icons in different sizes depending on the device. The .ico format is actually deprecated, so I would recommend using the service Realfavicongenerator It is really good and does actually show you how to implement it. Theres support for several programming languages. They even provide a gem for rails. https://github.com/RealFaviconGenerator/rails_real_favicon In addition they provide a service where you can check your favicon and they will tell you if you missed something.

What to choose?

It depends on your situation. If you want your app to be saved on users devises, then it would make sense to implement all the different icons.

But if you the site is a simple blog, I would just go for the fast solution with the .ico or a png image. You could go crazy and add support for the 3 sizes: 16x16: browser favicon 32x32: taskbar shortcut icon 96x96: desktop shortcut icon (and Google TV)