1. Add the Favicon File:
Go to https://www.freepik.com. In the searching options choose
iconsand type the key word
Download the icon you like in
.pngformatRename the file to
favicon.pngPlace the file in your app’s
app/assets/imagesdirectory
2. Add a Link to the Favicon in HTML Head:
- Open the
app/views/layouts/application.html.erbfile - Add a link tag in the
<head>section to specify the favicon:<%= favicon_link_tag 'favicon.png', type: 'image/png' %>
3. Clear Cache:
- Browsers often cache favicons, so you may need to clear your cache or perform a hard refresh to see the new favicon.
4. Restart the Server:
- Restart your Rails server to ensure that all changes are picked up.
Once done, your Rails app should display the favicon on the browser tab! 🤩
Top comments (4)
Nice! I didn't know about the
favicon_link_taghelper method — Today I Learned :)I like this tool for generating favicons as well as a whole set of meta tags and other assets:
realfavicongenerator.net/
Plop the generated assets in the
public/folder of a Rails app. Then, if a user on a phone bookmarks your web app to their home screen, it will look like a native app; using your favicon as the app icon.Hey Raghu! Thank you for sharing the tool. I'll definitely use it in my upcoming project.
And thanks again for your great lectures! 🤩
Loved this article! Talk about attention to detail. The Favicon is definitely an underrated expressive tool of any application.
Thanks Brian! ❤️