How to Add a Favicon: The 4 Files You Need (HTML and Rails)

Here’s how to add a favicon: put four files at the root of your site (favicon.ico, icon.svg, apple-touch-icon.png and a web manifest) and link them from your <head>. That covers browsers, iPhones, Android and Google search results. Below: the HTML, the Rails setup, a dark mode favicon and what to check when it doesn’t show.

Key takeaways

• Four files are enough: favicon.ico, icon.svg, apple-touch-icon.png (180×180) and a manifest with 192×192 and 512×512 PNGs.
• Keep favicon.ico at the root with that exact name.
• Since Rails 7.2, new apps ship icon.png and icon.svg instead of a favicon.ico.
• An SVG favicon can switch colors in dark mode.
• If it doesn’t show, it’s usually the cache.

Which favicon files do you need?

Four: an ICO, an SVG, an Apple touch icon and two PNGs for the web manifest. This is the set Evil Martians recommends instead of the twenty files most generators produce.

How to add a favicon in HTML

Add four <link> tags to the <head> of every page:

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

sizes="32x32" on the .ico line works around a Chrome bug that picks the ICO over the SVG. You may see sizes="any" in older guides; it makes Chrome download both files.

Then create manifest.webmanifest:

{
  "name": "Your App",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

If you want your icon to fill the circle or rounded square Android draws around it, add a 512×512 version with extra padding and "purpose": "maskable".

How do you make a favicon that works in dark mode?

Use an SVG favicon with a prefers-color-scheme media query inside it. A dark logo disappears on a dark browser tab, but an SVG can carry its own CSS and switch colors with the user’s theme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M4 4h24v24H4z" />
</svg>

Replace the <path> with your logo. Keep it simple: at 16 pixels, fine detail turns into a blur.

How do you add a favicon in Rails?

Replace public/icon.png and public/icon.svg, then add a favicon.ico. Since Rails 7.2, the default layout already links both icons:

<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">

Two more steps:

1. Add public/favicon.ico back. Some tools, like RSS readers, only look for /favicon.ico at the root of your domain.
2. Turn on the manifest if you want install icons. Rails generates a manifest template at app/views/pwa/manifest.json.erb. Since Rails 8, its route is commented out in config/routes.rb and so is the manifest tag in the layout: uncomment both. The default manifest only lists icon.png at 512×512, so add your 192×192 icon there.

Apps generated before 7.2 ship public/favicon.ico and public/apple-touch-icon.png instead. Swap those files and add the SVG line from above.

Will my favicon show up in Google search results?

Only if Google can crawl your home page and the icon, and even then it isn’t guaranteed. According to Google’s favicon guidelines:

• The <link> tag has to be on your home page.
• The icon has to be square and at least 8×8 pixels. Google recommends larger than 48×48 so it looks good everywhere.
• Google supports BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. Your favicon.ico or a PNG covers it.
• Google shows one favicon per hostname, so blog.example.com and www.example.com each need their own.
• Keep the favicon URL stable. Google asks you not to change it often.
• After a change, it can take from several days to several weeks to update. You can speed it up by requesting indexing of your home page in Search Console.

Why isn’t my favicon showing?

Usually it’s the cache. Browsers cache favicons aggressively, so an old icon can stick around after you deploy a new one.

• Open the icon’s URL directly (/icon.svg) to confirm it’s served.
• Check in a private window, or after a hard reload.
• When you redesign the icon, a new file name (icon-v2.svg) forces browsers to fetch it. Do it only on a real change: Google asks for a stable favicon URL.
• Leave favicon.ico at the root with its plain name. Tools that request it directly won’t find a renamed copy.

Favicon checklist

• favicon.ico (32×32) at the root
• icon.svg linked with type="image/svg+xml", with a dark mode style if your logo is dark
• apple-touch-icon.png (180×180)
• manifest.webmanifest with 192×192 and 512×512 PNGs
• Tags on the home page, so Google can find them
• Tested in a private window, in light and dark mode

Frequently asked questions

What size should a favicon be?

32×32 for favicon.ico, 180×180 for the Apple touch icon, and 192×192 plus 512×512 for the manifest. The SVG has no fixed size.

Do I still need favicon.ico?

Yes. Modern browsers use the SVG, but older browsers and tools like RSS readers still look for /favicon.ico.

Can I use an SVG as a favicon?

Yes, in modern browsers. Keep the ICO as a fallback, and keep a PNG or ICO for Google search results, which don’t list SVG as a supported format.

Where do I put the favicon in Rails?

In the public/ folder. Since Rails 7.2 that means public/icon.png and public/icon.svg, plus a public/favicon.ico that you add yourself.

The bottom line

Four files, four tags, and a private window to test. In Rails, swap the two icons the generator gave you and add the ICO back.

MagmaLabs is a senior engineering team in Mexico that has built and maintained Ruby on Rails apps for US companies since 2011. If your app needs more than a favicon fix, book a 30-minute call.