loading...

Add a favicon to your Ruby on Rails app!

katmuedas profile image Katherine Muedas ・2 min read

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🌸

Posted on by:

katmuedas profile

Katherine Muedas

@katmuedas

Inspired software developer and wellness advocate

Discussion

markdown guide
 

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

 

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

 
 

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