DEV Community

Cover image for How to easily add a favicon to your Rails App ✨
Margarita Potylitsyna
Margarita Potylitsyna

Posted on

7 1 2

How to easily add a favicon to your Rails App ✨

1. Add the Favicon File:

  • Go to https://www.freepik.com. In the searching options choose icons and type the key word
    Download the icon

  • Download the icon you like in .png format

  • Rename the file to favicon.png

  • Place the file in your app’s app/assets/images directory

2. Add a Link to the Favicon in HTML Head:

  • Open the app/views/layouts/application.html.erb file
  • Add a link tag in the <head> section to specify the favicon: <%= favicon_link_tag 'favicon.png', type: 'image/png' %> Add a link tag

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! 🤩

Favicon on the browser tab

Billboard image

Monitoring as code

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (3)

Collapse
 
raghubetina profile image
Raghu Betina

Nice! I didn't know about the favicon_link_tag helper 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.

Collapse
 
ritumka profile image
Margarita Potylitsyna

Hey Raghu! Thank you for sharing the tool. I'll definitely use it in my upcoming project.
And thanks again for your great lectures! 🤩

Collapse
 
bibimbop123 profile image
Brian Kim

Loved this article! Talk about attention to detail. The Favicon is definitely an underrated expressive tool of any application.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay