How to Add Favicon to Rails 4.2 App in 5 minutes


Step 1

Upload favicon image for your site to Favicon Generator

This will generate images in different sizes that can be used in different devices and browsers.

Step 2

Download the zip file from the above site, extract the zip file and copy all the files to the public folder.

Step 3

Copy the following code within the head tag of the layout.

  <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
  <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
  <link rel="manifest" href="/manifest.json">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="msapplication-TileImage" content="/mstile-144x144.png">
  <meta name="theme-color" content="#ffffff">

Now you can see the favicon in all browsers and devices. Here is the screenshot on iPhone when I added to the Home Screen.

Ruby Plus iPhone Home Screen

Eventhough I found a Favicon Maker gem that integrates with asset pipeline, I decided not to use it, because this is a simple task.

Using asset pipeline with Amazon CDN will improve the performance of your Rails app. Read Using Asset Pipeline for Favicons to learn how.

Feedback from Philippe Bernard

I'm the author of RealFaviconGenerator. I noticed your article about RoR and favicon. Thank you for picking RFG as the reference tool for this task! I also noticed that you didn't use a gem because the task was too simple to use one. Maybe you wanted to know that RFG now comes with its own gem, so you can get all the advantages without the drawbacks: - You basically use RFG as usual: a simple UI with smart options to design your icon platform-per-platform. - Once your favicon is ready, you get step-by-step, copy/paste, no-brainer instructions to install the favicon you've just created right in your RoR project. - When it's done, your favicon files are managed through the pipeline as expected. And this is still a 5-minutes process :) It's all here: Favicon Generator for Ruby on Rails. I would be glad to have your feedback about this!


Related Articles

Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.