Favicon generator for React

Add favicons to Create React App, Vite, or any React project via the public folder.

Create React App / Vite

Generate your favicon package first, then follow the steps below to integrate with React.

Installation steps

1
Generate and download your favicon package.
2
Extract all files into the public/ folder of your React project.
3
Remove any old <link rel="icon"> tags from public/index.html.
4
Add the snippet below to the <head> in public/index.html.
5
Restart the dev server and hard-refresh the browser.

Code & configuration

Copy and adapt for your React project

<link rel="icon" type="image%PUBLIC_URL%/png" href="%PUBLIC_URL%/favicon-96x96.png" sizes="96x96" %PUBLIC_URL%/>
<link rel="icon" type="image%PUBLIC_URL%/svg+xml" href="%PUBLIC_URL%/favicon.svg" %PUBLIC_URL%/>
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" %PUBLIC_URL%/>
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" %PUBLIC_URL%/>
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" %PUBLIC_URL%/>

Pro tips

For Vite, public/ maps to the site root — no path changes needed.
Use %PUBLIC_URL% prefix only if you are on Create React App with a homepage set.

Files to deploy

favicon.ico

favicon.svg

favicon-96x96.png

apple-touch-icon.png

android-chrome-192x192.png

android-chrome-512x512.png

site.webmanifest