Where do I put the favicon in a React app?

In the public folder. Then reference each icon with link tags in public/index.html for Create React App, or in the root index.html for a Vite project.

Does React handle favicons automatically?

No. Plain React (CRA or Vite) does not manage the document head, so you add the icon link tags to index.html yourself. Frameworks like Next.js do automate this.

How do I add a favicon in a Vite React app?

Place icon files in the public folder and add link tags to the index.html at your project root. Vite serves public assets from the site root, so absolute paths work.

Why is my React favicon not updating after deploy?

Browser favicon caching. Hard-refresh, open a private window, or version the filename (favicon-32x32.v2.png) so the new icon is fetched immediately.

All platforms

Favicon for React

How to add a favicon in React

To add a favicon in a React app, place your icon files in the public folder and reference them with <link> tags in public/index.html (Create React App) or index.html at the project root (Vite). React itself does not manage the head, so you wire the tags up manually.

What you need

favicon.ico plus PNG favicons (16/32), a 180 apple-touch-icon, and a manifest for PWA icons.
A public folder (CRA: public/, Vite: served from root /).
Direct edits to index.html since React does not control the document head.

Step-by-step: add a favicon in React

Add icon files to public. Copy favicon.ico, favicon-32x32.png, apple-touch-icon.png, and site.webmanifest into the public folder of your React project.
Reference them in index.html. Open public/index.html (CRA) or index.html (Vite) and add the icon link tags inside <head>. Use %PUBLIC_URL% in CRA paths.
Rebuild and deploy. Run your build (npm run build) and deploy. The icons resolve from the site root.

Add to index.html <head> (use %PUBLIC_URL% prefix on Create React App):

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Common mistakes to avoid

Forgetting the %PUBLIC_URL% prefix in Create React App, which breaks paths on subpath deploys.
Editing src/ instead of public/index.html - React does not inject icon tags from components.
Leaving the default CRA logo favicon in place because only favicon.ico was swapped.
Not accounting for the build hashing/caching, so the old icon lingers until a hard refresh.

Free forever, no sign-up

Generate a complete icon set for React

One logo in, every file out: favicon.ico, the PNG sizes, the Apple touch icon, Android and PWA icons, a maskable icon, the web manifest, and a copy-paste snippet ready for React. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where do I put the favicon in a React app?: In the public folder. Then reference each icon with link tags in public/index.html for Create React App, or in the root index.html for a Vite project.
Does React handle favicons automatically?: No. Plain React (CRA or Vite) does not manage the document head, so you add the icon link tags to index.html yourself. Frameworks like Next.js do automate this.
How do I add a favicon in a Vite React app?: Place icon files in the public folder and add link tags to the index.html at your project root. Vite serves public assets from the site root, so absolute paths work.
Why is my React favicon not updating after deploy?: Browser favicon caching. Hard-refresh, open a private window, or version the filename (favicon-32x32.v2.png) so the new icon is fetched immediately.

Favicon guides for other platforms

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.