How to Add Favicon to Rails 4.2 App in 5 minutes

Steps

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 rubyplus.com 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!

Reference


Related Articles


Software Compatibility Best Practices

I spoke to some of the most talented and experienced software developers. I have created a guide that is filled with valuable insights and actionable ideas to boost developer productivity.

You will gain a better understanding of what's working well for other developers and how they address the software compatibility problems.

Get the Guide Now