logoredraws.com

Add or change a favicon in Ruby on Rails

How Rails 8 handles favicons, which files to replace, how to prepare a clean SVG icon with PNG fallbacks, and why an old icon can persist in the browser.

Published

Contents
  1. The short answer
  2. What a new Rails app ships with
  3. Changing the favicon step by step
  4. Preparing the SVG: vector artwork versus embedded images
  5. PNG fallback and Apple touch icon
  6. Keeping a favicon.ico for direct requests
  7. Alternative: serving icons through the asset pipeline
  8. Why the old icon may still appear
  9. Files at a glance
  10. Rights to the artwork
  11. Gaps in this guidance

The short answer

In a recent Rails application, including one generated with Rails 8, the favicon is usually a pair of static files in the public folder, an SVG icon and a PNG icon, referenced by link tags in the main application layout. To change the favicon, replace those files with your own artwork under the same names, or point the link tags at new files. To add a favicon to an app that has none, place the files in public and add the link tags to the head of the layout. No gem or configuration change is needed.

This article covers a Rails app whose favicon is built from a vector logo: which files Rails expects, how to check that the SVG is genuine vector artwork, and which fallbacks matter. No version-specific test results or measurements were supplied for this article, so treat the file names below as the common default. Confirm them against your own generated files.

What a new Rails app ships with

Newer Rails generators create a placeholder icon as public/icon.png and public/icon.svg. The head of app/views/layouts/application.html.erb typically contains lines like these:

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

Browsers that support SVG favicons can use the SVG. Others fall back to the PNG. The apple-touch-icon line supplies the PNG for home-screen shortcuts on Apple devices. Older Rails versions generated a public/favicon.ico instead, so an upgraded app may have either setup, or both.

If the app uses the progressive web app manifest template that recent Rails versions generate under app/views/pwa, that manifest may also reference the icon file. If you rename or move the icon, update the manifest as well.

Changing the favicon step by step

  • 1. Export your icon as an SVG and as a square PNG with enough resolution to scale down cleanly.
  • 2. Replace public/icon.svg and public/icon.png with your files, keeping the same names. Alternatively, use new names and edit the href values in the layout.
  • 3. If the app still has an older public/favicon.ico, replace it or delete it so it does not conflict with the new icons.
  • 4. Update the PWA manifest if it references a renamed file.
  • 5. Restart nothing: public files are served as-is. Reload the page with the browser cache bypassed, or open it in a private window, to check the result.

Preparing the SVG: vector artwork versus embedded images

A file ending in .svg is not necessarily vector artwork. Some exports wrap a raster image, such as a PNG encoded as base64, inside an SVG container. That kind of file looks like an SVG but scales like a bitmap. To check, open the file in a text editor. Real vector artwork consists mainly of path, circle, rect or polygon elements. An image element with a long data string means embedded raster content.

  • Convert text to outlines. A favicon cannot rely on fonts being installed, so lettering should be paths.
  • Simplify the mark for small sizes. Thin strokes, fine detail and long wordmarks become unreadable at favicon scale, so a symbol or monogram from the logo usually works better than the full lockup.
  • Use a square artboard with a viewBox that frames the icon tightly, so it is not shrunk by excess padding.
  • Remove editor metadata, hidden layers and unused definitions to keep the file small.
  • Optionally, add a prefers-color-scheme media query inside the SVG to adjust colors for dark browser themes. Browser support for this varies, so test it.

PNG fallback and Apple touch icon

Keep the PNG even if you have a clean SVG. Not every browser or platform uses SVG favicons, and Apple home-screen icons rely on PNG. Export the PNG from the same vector source rather than upscaling an old small bitmap. Apple devices may place transparent areas on a background they choose, so an opaque background is the safer choice for the touch icon. If you want a transparent favicon and an opaque touch icon, use two separate PNG files and point each link tag at its own file.

Keeping a favicon.ico for direct requests

Some browsers and tools request /favicon.ico directly, especially when they load a non-HTML response that has no link tags. If that file is missing, the request returns a 404, and Rails may log a routing error for it. Adding a small favicon.ico to public, generated from the same artwork, prevents those errors. The link tags in the layout still determine what modern browsers show on your HTML pages.

Alternative: serving icons through the asset pipeline

Files in public are served without fingerprinted names. If you prefer digested file names, which help with cache invalidation, put the icons in app/assets/images and use the favicon_link_tag helper. Rails 8 apps use Propshaft by default, and the helper resolves the digested path:

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

If you switch to this approach, remove the hard-coded link tags and the old copies in public so the two setups do not compete. Leave a favicon.ico in public if you want to handle direct requests, because that path cannot be fingerprinted.

Why the old icon may still appear

Browsers cache favicons aggressively, sometimes separately from the page cache. Seeing the old icon after deploying a new one usually means the browser cache is stale, not that the deployment failed. Check the new file directly by its URL, or use a private window. For public files, renaming the icon or adding a version query string to the href forces a fresh request. With the asset pipeline, the digest changes automatically whenever the file changes.

Files at a glance

File | Typical location | Purpose
icon.svg | public, or app/assets/images with the helper | Scalable favicon for browsers that support SVG
icon.png | public, or app/assets/images with the helper | Raster fallback and Apple touch icon
favicon.ico | public | Answers direct requests for the legacy path
PWA manifest | app/views/pwa | Lists icons for installed web apps, if enabled

Rights to the artwork

Use only a logo you are entitled to use. Being able to download a logo file does not give you permission to modify the artwork, reuse its fonts or use the trademark on your site. For your own brand or a client's, work from the official vector master files. Do not trace or convert a screenshot.

Gaps in this guidance

No version-specific documentation, browser support figures or test results were supplied for this article. Generated file names, image dimensions and layout contents can differ between Rails releases and upgraded apps. Check your own application layout, public folder and manifest before replacing files, and check current browser support if you depend on SVG-only or dark-mode favicon behavior.