Favicon for React
React doesn't render the <head> for you — the favicon lives in index.html. Drop your favicon.ico into /public and link it; modern setups also ship an SVG and PNG variant.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Vite and CRA both serve /public at the root, so /favicon.ico is the default discovery path. No bundler config required.
For high-DPI displays and PWA install prompts, add a 180×180 apple-touch-icon and a 512×512 PNG to /public and link them in index.html.
How it works
- 1
Generate a multi-size .ico
Use our favicon generator with a 512×512 source.
- 2
Drop into /public
Place favicon.ico, favicon.svg, and apple-touch-icon.png there.
- 3
Link in index.html
Add <link rel="icon" href="/favicon.ico"> and <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Try it now
Build a React-ready favicon
Favicon GeneratorFAQ
Where does the favicon go in a Vite React app?+
/public/favicon.ico (and /public/favicon.svg if you want a vector variant).
How do I add a dark-mode favicon?+
Use a single SVG with a <style>@media (prefers-color-scheme: dark) {...}</style> block.
Why won't my favicon load in dev?+
Hard-refresh the tab. Browsers cache /favicon.ico per-origin even across reloads.