How to Add a Favicon in Ruby on Rails

The short answer

To add a favicon in Rails, put the icon files in the public folder or in the asset pipeline's images folder. Then reference them with link tags in the head of your main layout, usually app/views/layouts/application.html.erb. A favicon is the small icon a browser shows in tabs, bookmarks and history. Files in public are served at the site root under their exact filenames. Files in app/assets/images are referenced through Rails helpers, which can add a fingerprint (a content hash in the filename) so browsers fetch a new copy when the icon changes.

For the artwork, a good setup is an SVG favicon made from a simplified version of your logo, plus a raster fallback (PNG or ICO). SVG is a vector format: shapes are stored as mathematical paths rather than pixels, so the icon stays sharp at any size. The raster fallback covers browsers and platforms that do not use SVG icons.

Step 1: Check what your Rails app already generated

Before adding anything, open the public folder and the application layout. Newer Rails application templates may already include placeholder icon files in public, along with matching link tags in the layout head. If they exist, the simplest approach is to replace those files with your own artwork and keep the same filenames. Older or customized apps may have only a favicon.ico in public, or nothing at all. This guide does not depend on a specific Rails version, so trust what your project actually contains over any default described elsewhere.

Step 2: Choose where the files live

• public folder: files are served as-is at the root path, such as /favicon.ico. This is simple and predictable. Because the filename never changes, browsers may keep showing a cached old icon after you update it.
• app/assets/images with a helper: files go through the asset pipeline (Propshaft or Sprockets, depending on the app). In production, references get fingerprinted filenames, which avoids stale caching. You must reference the files through Rails helpers, not hard-coded paths.

Even if you use the asset pipeline, consider also keeping a favicon.ico in public. Some browsers and tools request /favicon.ico directly without reading your link tags.

Step 3: Add the link tags to the layout

If the files are in public, write plain link tags inside the head element of the layout:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

If the files are in app/assets/images, use the favicon_link_tag helper. It builds the link element and resolves the asset path for you. Pass rel and type explicitly whenever the file isn't an ICO:

<%= favicon_link_tag "favicon.ico" %>
<%= favicon_link_tag "icon.svg", type: "image/svg+xml" %>
<%= favicon_link_tag "apple-touch-icon.png", rel: "apple-touch-icon", type: "image/png" %>

Use the tags from one approach or the other, not both for the same file. If your app has several layouts, such as a separate admin or mailer layout, add the tags to each layout that renders full HTML pages.

Step 4: Prepare the logo artwork for the SVG favicon

A full logo rarely works at favicon size. Fine details, thin strokes and wordmarks blur or vanish. Start from a simplified mark, such as the symbol, a monogram or a single letterform, and design it to read at very small sizes.

• Use a square artboard and a square viewBox, the SVG attribute that defines the drawing's coordinate area. A non-square canvas can be shrunk or offset in the tab.
• Convert text to outlines, which turns letters into path shapes. Otherwise the browser may not have the font, and the letters will render in a substitute typeface.
• Remove hidden layers, editor metadata, embedded raster images and references to external files. The favicon should be a self-contained SVG.
• Prefer solid fills and simple shapes over hairline strokes, gradients and effects.
• Check contrast against both light and dark browser themes. If needed, an SVG can include a prefers-color-scheme media query in an internal style block to switch colors. Test this in the browsers you care about, because support for styling inside favicons varies.

Export the raster fallbacks (ICO and PNG) from the same simplified artwork. That keeps the icon consistent everywhere it appears. This guide does not give pixel dimensions for each platform because no confirmed specification was supplied. Check current browser and platform documentation for recommended sizes before final export.

Step 5: Verify the result

• Open each icon URL directly in the browser, for example /favicon.ico and /icon.svg. If you use helpers, open the fingerprinted path shown in the page source. Each should load the image, not a 404 error.
• View the page source and confirm the link tags appear in the head with the paths you expect.
• In the browser's developer tools, check the network panel for failed or redirected icon requests.
• If the old icon still shows, test in a private window or another browser. Browsers cache favicons aggressively.
• In production, make sure assets were precompiled during deployment. If you rely on public, confirm the app or web server actually serves static files from that folder.
• Check the icon on a light tab bar, a dark tab bar and, if relevant, a mobile home screen.

A note on file formats and logo rights

A file extension doesn't prove what a file contains. An .svg file can wrap an embedded bitmap, which then offers none of the scaling benefits of vector paths. Open the file in a vector editor or a text editor and confirm it contains paths rather than a single embedded image. An extension also says nothing about permission: make sure you have the right to use and adapt the logo before turning it into a favicon.