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.
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.