How to Add a Favicon in React (Every Method Covered)
- In React with Vite or Create React App, place your favicon.png in the public/ folder and add a link tag to index.html
- In Next.js Pages Router, drop favicon.ico into the public/ folder — it serves automatically at /favicon.ico
- In Next.js App Router, place app/favicon.ico inside the app/ directory and Next.js handles the rest
- Hard refresh (Ctrl+Shift+R) after updating to bypass the browser's cached favicon
Table of Contents
Adding a favicon in React depends on your build setup. The file placement and link tag location differ between Vite, Create React App, and Next.js — and Next.js App Router handles it differently again from Pages Router. Here is the exact method for each.
Adding a Favicon in React with Vite
Vite's default project structure has a public/ folder in the project root. Files in public/ are served directly at the site root — so a file at public/favicon.png is accessible at /favicon.png.
Steps:
- Place your
favicon.png(orfavicon.ico) in thepublic/folder. - Open
index.htmlin the project root (not insidesrc/). - Add this inside the
<head>:<link rel="icon" type="image/png" href="/favicon.png">
Vite's index.html is at the root level, not inside public/ — that catches a lot of developers who expect the CRA structure. The / prefix in the href is important: it references the root regardless of what route is active.
Reload your dev server after adding the file. The favicon appears immediately in the browser tab.
Adding a Favicon with Create React App (CRA)
Create React App uses the same public/ folder concept as Vite, but index.html lives inside public/ instead of the project root.
Steps:
- Place your
favicon.png(orfavicon.ico) inside thepublic/folder. - Open
public/index.html. - CRA includes a favicon link by default:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico"> - Either replace the default
favicon.icofile, or change the href to point to your PNG:href="%PUBLIC_URL%/favicon.png"
The %PUBLIC_URL% placeholder gets replaced with the actual public path during build. Do not remove it — it ensures the favicon loads correctly both in development and when deployed to a subdirectory.
Adding a Favicon in Next.js Pages Router
Next.js automatically serves any file inside the public/ folder. A file at public/favicon.ico is available at /favicon.ico with no config needed.
Steps:
- Place
favicon.icoorfavicon.pngin yourpublic/folder. - Open
pages/_document.tsx(or_document.js) and add a link tag inside the<Head>component. - For ICO:
<link rel="icon" href="/favicon.ico"> - For PNG:
<link rel="icon" type="image/png" href="/favicon.png">
If you do not have a custom _document file, Next.js Pages Router will still serve favicon.ico from public/ automatically — browsers request /favicon.ico by default, and Next.js handles the response without any link tag.
Adding a Favicon in Next.js App Router (13+)
Next.js App Router has a built-in convention for favicons. Place favicon.ico directly inside the app/ directory — not public/.
Automatic method (recommended):
- Place
app/favicon.icoinside yourapp/directory. - Next.js automatically generates the correct link tags — no code changes needed.
Metadata API method (for PNG or programmatic icons):
In your root app/layout.tsx, export a metadata object:
export const metadata = {
icons: {
icon: '/favicon.png',
apple: '/apple-touch-icon.png',
},
};This approach works with PNG files and lets you specify multiple icon types in one place. Note: the pre/code block above does not use backtick syntax in actual implementation — refer to the Next.js docs for the exact export format.
Generating All Favicon Sizes Before You Start
Whichever React framework you use, start with a proper set of favicon files. At minimum you need:
favicon.icoorfavicon.png— for standard browser tabs (16px, 32px)apple-touch-icon.png— 180x180, for iOS home screenandroid-chrome-192x192.pngandandroid-chrome-512x512.png— for Android and PWA install
Upload your logo or any image to the Toucan Favicon Generator and download all sizes at once. The generator also creates a site.webmanifest snippet with the correct JSON for your manifest file — paste it directly into your Next.js or React project.
Hard refresh (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac) after deploying to clear any cached favicon from your browser.
Generate All Favicon Sizes for Your React App
Upload any image and get all sizes at once — favicon.ico, apple-touch-icon, Android icons, and a site.webmanifest snippet. Free, no signup.
Open Favicon GeneratorFrequently Asked Questions
Where do I put the favicon file in a React project?
In Vite and Create React App, the favicon goes in the public/ folder. In Next.js App Router, favicon.ico goes in the app/ folder. In Next.js Pages Router, it goes in public/.
Why is my React favicon not showing after I updated it?
Browsers cache favicons aggressively. Do a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or open a private/incognito window to bypass the cache and see the updated favicon.
Can I use a PNG favicon in React instead of ICO?
Yes. PNG is supported in all modern browsers. Use link rel="icon" type="image/png" href="/favicon.png" in your HTML head. ICO format offers slightly better compatibility with very old browsers, but is rarely necessary for new projects.
Do I need to add a favicon link tag in Next.js App Router?
No — if you place favicon.ico in the app/ directory, Next.js App Router automatically generates the correct link tags. You only need to add manual tags if using PNG files or the metadata API for custom configurations.
