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.
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:
Go to the RealFaviconGenerator, submit your favicon picture and craft your icon. Your picture should be 260x260 or more for optimal results.
Add rails_real_favicon to your Gemfile:
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 infavicon.json
file.I replaced it with:
{ "master_picture": "app/assets/images/favicon/kat_favicon.png", //rest of the code }
Change the
name
andshort_name
onapp/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)
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.
Thanks Ben!
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?
Dont think should be so hard... maybe there is a way without installing gems and so...?