⚛️ React Guide

Favicon for React

Learn how to add and configure favicons in your React application, whether you're using Create React App, Vite, or a custom build.

⚡ Generate Favicon Now

Adding Favicon to Create React App (CRA)

Create React App comes with a default favicon. To replace it with your own:

Generate your favicon package using our faviconverter
Replace public/favicon.ico with your new ICO file
Add additional PNG files to the public/ directory
Update public/index.html with the proper link tags

<!-- public/index.html -->
<head>
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <link rel="icon" type="image/png" sizes="32x32"
        href="%PUBLIC_URL%/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16"
        href="%PUBLIC_URL%/favicon-16x16.png" />
  <link rel="apple-touch-icon" sizes="180x180"
        href="%PUBLIC_URL%/apple-touch-icon.png" />
  <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
</head>

Adding Favicon to Vite + React

For React apps using Vite as the build tool:

Copy your favicon files to the public/ directory
Update index.html (located at the project root in Vite)

<!-- index.html (Vite project root) -->
<head>
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <link rel="icon" type="image/png" sizes="32x32"
        href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16"
        href="/favicon-16x16.png" />
  <link rel="apple-touch-icon" sizes="180x180"
        href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</head>

Note: In Vite, you don't need the %PUBLIC_URL% prefix — just use absolute paths starting with /.

React Helmet for Dynamic Favicons

If you need to change the favicon dynamically (e.g., per page or based on state), you can use react-helmet-async:

import { Helmet } from 'react-helmet-async';

function MyPage() {
  return (
    <>
      <Helmet>
        <link rel="icon" href="/custom-favicon.ico" />
      </Helmet>
      <div>Page content</div>
    </>
  );
}

PWA Favicon Setup in React

For Progressive Web Apps, you need a manifest.json (or site.webmanifest) that specifies your app icons:

{
  "name": "My React App",
  "short_name": "ReactApp",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

File Structure

public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest

Generate Your React Favicon

Use our free faviconverter to generate all the favicon files you need. Download the full package, extract to public/, and you're done!