ANSWER

Quick answer

Place the package in public and reference root-relative paths from index.html. Assets in public are copied without import hashing.

Last verified
July 31, 2026
Evidence
Primary documentation plus a route-specific implementation example
Primary sources
1
01

Vite and client-rendered React

Place the package in public and reference root-relative paths from index.html. Assets in public are copied without import hashing.

Connected next stepNext.js App Router Favicons: Files and Metadata for the closest prerequisite or comparison.

02

Create React App

Replace public/favicon.ico and update public/index.html link elements. Use %PUBLIC_URL% only where the build system expects it.

Connected next stepHow to Add a Favicon in Nuxt: Public Files and Head Tags for the next connected implementation decision.

03

Production checks

Build locally, inspect the output HTML, and test the deployed base path. Apps hosted below a subpath need particular care with absolute URLs.

Connected next stepOpen the most relevant production tool and verify the decision with a working output.

04

Keep favicon discovery outside the component tree

For a Vite application, put stable files in public and declare them in index.html. This metadata is available before React mounts and does not depend on a route component rendering successfully.

Runtime icon changes can be appropriate for state, but preserve one canonical link and avoid appending a new element on every render or navigation.

05

Account for Vite base paths

Files in public are copied to the output root, while the final deployment may live below a path prefix. Test the built application under the same base setting and hostname layout used in production.

Inspect dist after every change and verify that the manifest’s relative icon URLs resolve from the manifest URL rather than from the React source folder.

BUILD

Production file tree and code: Vite public files and document metadata

The public directory preserves stable names while index.html makes the favicon discoverable before React mounts. Recheck URLs when Vite base points below the hostname root.

FILE TREE
public/
├── favicon.svg
├── favicon.ico
├── apple-touch-icon.png
└── site.webmanifest
index.html
HTML
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
DOWNLOADABLE EVIDENCE

Review the headings, sources, implementation artifact, and update record for this guide as structured JSON.

Download guide evidence ↓
Primary references
Evidence scope
Guide
How to Add a Favicon to React and Vite
Coverage
Client behavior can change by browser, operating system, platform version, cache state and deployment configuration. Unperformed manual observations are not claimed.
Q&A

Questions, answered

Should I import favicon in a component?+

Usually no. Icon discovery belongs in document metadata, not rendered body components.

Can React change it at runtime?+

Yes by updating a link[rel=icon], but preserve a stable default and avoid unnecessary churn.