Add a favicon to your Ruby on Rails app!
Tags: ruby, rails, favicon
Published: 2019-04-08 22:05:45

---
title: Add a favicon to your Ruby on Rails app!
published: true
description: 
tags: #ruby, #rails, #favicon 
---
I would love to share what I been learning about favicons and how I am using them on my projects.
 
**What is a favicon?**

Favicon is a little icon that is associated with a particular website and represents the site or brand on browser tabs, bookmark lists, search history, search ads, and even search results.
It usually contains the logo, the first letter of the brand or a generic image that represents the content or business type. 

![This is a favicon](https://thepracticaldev.s3.amazonaws.com/i/dgmib3f7e1ibzbww231t.png)


**Why are favicons important?**

* They support brand awareness and recognizability.

* They save people time when browsing the internet. When a user has several tabs open; the favicon makes it easy to distinguish between different sites. 

    > *When a website doesn’t use a favicon, your web browser will use a little blank     page icon next to the website’s name. If you get enough of these in a column, then selecting the desired site becomes much more difficult since all the blank pages will look the same.*

* Gives a professional look to the site.

**How am I adding favicons to my projects?**

I am using [RealFaviconGenerator](https://realfavicongenerator.net/favicon/ruby_on_rails#.XKuuz-tKi_U) for Ruby on Rails and the [rails_real_favicon](https://github.com/RealFaviconGenerator/rails_real_favicon) gem. 

[RealFaviconGenerator](https://realfavicongenerator.net/favicon/ruby_on_rails#.XKuuz-tKi_U) generates for you all the favicons versions that you need to support most browsers and platforms (not only for desktop browsers). 

All you need to do is:
* Go to the [RealFaviconGenerator](https://realfavicongenerator.net/favicon/ruby_on_rails#.XKuuz-tKi_U), submit your favicon picture and craft your icon. Your picture should be 260x260 or more for optimal results.


* Add [rails_real_favicon](https://github.com/RealFaviconGenerator/rails_real_favicon) to your Gemfile:

   ```ruby
     group :development do
         gem 'rails_real_favicon'
     end
   ```
    

* Run `bundle install`.

* Create a new file named `favicon.json` and populate it with:
(This code will be generated it for you after adding your favicon picture to RealFaviconGenerator.)
```ruby
    {
        "master_picture": "TODO: Path to your master picture",
        "favicon_design": {
            "ios": {
                "picture_aspect": "no_change",
                "assets": {
                    "ios6_and_prior_icons": false,
                    "ios7_and_later_icons": false,
                    "precomposed_icons": false,
                    "declare_only_default_icon": true
                }
            },
            "desktop_browser": [

            ],
            "windows": {
                "picture_aspect": "no_change",
                "background_color": "#da532c",
                "on_conflict": "override",
                "assets": {
                    "windows_80_ie_10_tile": false,
                    "windows_10_ie_11_edge_tiles": {
                        "small": false,
                        "medium": true,
                        "big": false,
                        "rectangle": false
                    }
                }
            },
            "android_chrome": {
                "picture_aspect": "no_change",
                "theme_color": "#ffffff",
                "manifest": {
                    "display": "standalone",
                    "orientation": "not_set",
                    "on_conflict": "override",
                    "declared": true
                },
                "assets": {
                    "legacy_icon": false,
                    "low_resolution_icons": false
                }
            },
            "safari_pinned_tab": {
                "picture_aspect": "black_and_white",
                "threshold": 66.40625,
                "theme_color": "#5bbad5"
            }
        },
        "settings": {
            "scaling_algorithm": "Mitchell",
            "error_on_image_too_small": false,
            "readme_file": false,
            "html_code_file": false,
            "use_path_as_is": false
        }
    }

```
* Run `rails generate favicon` to actually create the icons and HTML code.

* Add the following code in your layouts to insert the HTML code in your pages.

```ruby
    = render 'application/favicon'
```

* Don't forget to replace `TODO: Path to your master picture` 
with the path of your master picture in `favicon.json` file.

     
     I replaced it with: ```ruby
     {
         "master_picture": "app/assets/images/favicon/kat_favicon.png", 
         //rest of the code
     }
     ```

* Change the `name` and `short_name` on `app/assets/images/favicon/site.webmanifest.erb`

* And that's all!!! 🎉





There are many tools and ways that will help you add a favicon to your project. This is the way I am doing it. Hopefully, this is helpful and saves you a little hunting for the solution.

Happy Coding!
**_Kat_**🌸