Favicon Showing a 404 in the Console: How to Fix It

You open DevTools, and there it is in red: GET /favicon.ico 404 (Not Found). The page works and nothing looks broken, but the error shows up on every reload.

That line is the browser telling you something specific: it didn't find an icon declared in the page it just loaded, so it tried the default location, /favicon.ico, and nothing was there. Once you know that, the fix is usually quick.

When browsers request /favicon.ico

There's a lot of folklore about this request, including on this site, which used to say browsers send it on every page load no matter what. So I tested it. I served a few small test pages from a local server, opened each one in Chrome, and logged every request Chrome made.

Test page	What Chrome requested
Page with <link rel="icon" href="/icon.png">	/icon.png only. No request for /favicon.ico.
Page with no icon tags	/favicon.ico
Page declaring an icon that doesn't exist	The missing icon (twice). No fallback to /favicon.ico.
A JSON file opened directly	/favicon.ico
A PNG image opened directly	/favicon.ico

So in Chrome the request is a fallback, not a habit. It happens when the document has no usable icon declaration. Firefox follows the same rule.

That changes what the 404 means. If you see it in the console, the page you're looking at doesn't declare an icon, or the browser couldn't read the declaration. Possible reasons:

• The <link rel="icon"> tag is missing from this page. Common on error pages, admin screens, and pages rendered by a different template from the rest of the site.
• The tag is outside <head>, or misspelled (rel="icons", a typo in href), so the browser doesn't recognise it.
• You're viewing something that isn't an HTML page: an API response, a JSON file, an image or a PDF opened directly. These can't declare an icon, so the browser always tries /favicon.ico.

Browsers aren't the only source either. RSS readers, chat apps building link previews, bookmarking tools and many crawlers request /favicon.ico directly without reading your HTML. So even a site with perfect tags gets these requests in its server logs, just not from its own visitors' browsers.

One test result worth knowing

The third row in that table surprised me. When a page declares an icon and that file is missing, Chrome does not fall back to /favicon.ico, even if a perfectly good one exists. It retried the broken URL and then showed no icon at all.

So a broken <link rel="icon"> is worse than no tag. With no tag, you get the /favicon.ico fallback. With a broken tag, you get a blank tab. If your favicon disappeared after a redesign, check that every declared icon URL actually loads.

Is the 404 worth fixing?

Visitors never see it, but yes:

• It's a signal. As above, it usually means a page is missing its icon tags, which also means that page shows a generic icon in the tab and in bookmarks.
• Other tools look there. Feed readers, link previews and some crawlers check /favicon.ico and show nothing, or a placeholder, when it's missing.
• It's noise. A 404 on every API call or raw-file view makes real errors harder to spot in your logs.

It's also common. When I audited 101 popular websites, 13 returned a 404 for /favicon.ico, including Discord, Notion and Dropbox.

The fix

Do both of these:

1. Put a real favicon.ico at the root of your domain, so https://yoursite.com/favicon.ico returns an icon. It has to be at the root, since nothing looks in /assets/ or /static/. Ideally it's a real multi-size ICO with 16, 32 and 48px images inside. The converter makes one from any logo, or see other ways to convert an image to ICO.

2. Declare your icons on every page, in the <head> of your shared layout, so browsers don't need the fallback at all:

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

The HTML favicon tag guide explains each line.

Where the file goes in common setups

The file needs to end up at the root of the deployed site. In most stacks, that means a folder that's copied to the output as-is:

Stack	Put favicon.ico in
Plain HTML	The same folder as your index.html
Next.js (App Router)	app/ (served at /favicon.ico automatically)
Vite, React, Vue	public/
Nuxt, Astro	public/
SvelteKit	static/
WordPress	Set a Site Icon, or upload to the site root

If the file is in the right folder and still 404s in production, check two things. First, that your build actually copies it: open the build output folder and look for it. Second, that your server or host isn't routing /favicon.ico to your app. Single-page apps often have a catch-all rule that sends every unknown path to index.html, which gives you a different problem: a 200 response containing HTML instead of an image. Instagram and Duolingo both do this. The Next.js, React, Vue and Nuxt and Astro and SvelteKit guides cover each stack in detail.

For API-only domains

If the 404s come from an API subdomain like api.example.com, the requests are from people or tools opening JSON responses directly. You have two clean options. Serve a small favicon.ico from the API, or return 204 No Content for /favicon.ico so the request succeeds without a body. Either one silences the log noise.

Confirm it's fixed

Open https://yoursite.com/favicon.ico in a private window. You should see your icon, not an error page and not your homepage. Then run the site through the favicon checker. It requests /favicon.ico alongside every declared icon and flags any that fail, including HTML served in place of an image.