DEV Community

Katherine Muedas
Katherine Muedas

Posted on

Add a favicon to your Ruby on Rails app!

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

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 for Ruby on Rails and the rails_real_favicon gem.

RealFaviconGenerator 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:

     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.)

    {
        "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.

    = 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:

     {
         "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🌸

Top comments (5)

Collapse
 
rlogwood profile image
rlogwood

Love this, thank you!

FWIW the instructions on the result page at realfavicongenerator.net miss one step for me (Ruby 2.7.1, Rails 6.0.3.2, Ubuntu, webpacker):

To app/assets/config/manifest.js add

//= link favicon/browserconfig.xml

Collapse
 
ben profile image
Ben Halpern

Nice! May some future searcher Google for this answer and find this nicely written post.

Collapse
 
katmuedas profile image
Katherine Muedas

Thanks Ben!

Collapse
 
spaquet profile image
Stephane Paquet

Thanks for sharing. Not sure we should have a gem for this. It's a pretty basic feature and we should not have to depend on a gem that might be poorly maintained overtime.
What do you think?

Collapse
 
laynierpd profile image
Laynier Piedra

Dont think should be so hard... maybe there is a way without installing gems and so...?