How to add a favicon in React

A React single-page app has one HTML file. Put the icon files in public/ and replace the icon lines in index.html; that’s all.

Steps

Copy every file from the package into public/.
Vite: open index.html in the project root. Create React App: open public/index.html.
Replace the existing <link rel="icon"> line (vite.svg or favicon.ico) with the tags below.
Delete the default vite.svg or the old logo192.png/logo512.png and manifest.json if you don’t use them, so they are not served by mistake.

File to use: the whole package. Make it with the favicon generator (free, no signup).

Code

index.html <head>

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

Good to know

Create React App also supports %PUBLIC_URL% in hrefs, e.g. href="%PUBLIC_URL%/favicon.ico"; a leading slash works when the app is served from the domain root.
To change the favicon at runtime (unread-count badges and similar), update the href of the existing link element rather than adding new ones.

Check it worked

Run the favicon checker on your live URL to confirm every icon loads and Google has a usable size. If the old icon keeps showing, see favicon not showing. The full tag-by-tag explanation is in how to add a favicon.

Other platforms: WordPress · Next.js · Shopify · Squarespace · Wix · Webflow · Astro · Django

Questions people ask

How do I change the favicon in React?

Replace the icon files in public/ and update the link tags in index.html. React itself does not manage the favicon.

Why does my React app still show the React or Vite logo?

The old favicon is cached, or index.html still points at the default file. Check the link tags, delete the default files, and hard-refresh /favicon.ico.