A Quick Guide to Favicons in Rails

6/3/2017

Ok, so what’s a favicon? Possibly my new favourite little bit of code, favicons are the images that display in browser tabs.

You probably recognise most of those icons, right? They’re a quick and easy visual way for a user to orient herself while using the browser.

So I present to you my guide to adding a favicon to a Rails app.

Step 1:
Find the image or logo you want to use as a favicon. Save it to your rails project’s public folder.

Step 2:
Go to your favourite favicon generator online — I quite like Favicomatic. Upload your image and save it as favicomatic.zip (or whatever yours is called) to your public folder. (I already had a favicomatic.zip folder, which is why mine has the (2)).

Step 3:
Grab the HTML code from the website (there are two sizes to choose from) and paste it to your application.html.erb file, just under the title.

Step 4:
Open the favicon folder (here renamed from favicomatic(2) to favicon.zip) in the finder so you can unzip it. It’ll appear as an unzipped folder in your project. Delete the zipped version. Note that the folder MUST be called favicon for Rails to find it.

Step 5:
Refresh your browser and admire your favicon!

PS Hawk-eyed readers will notice that I named this ‘starfleet logo’ in Step 1. Apparently I am unable to tell Star Trek and NASA apart.