How to Add a Favicon to Your React App

Learn how to add a favicon to your React application. Our free favicon generator creates all the favicon files you need, and this guide shows you exactly how to implement them in Create React App, Vite, or other React setups.

Upload Your Logo

Click to upload or drag and drop

PNG, JPG, SVG up to 10MB

What You'll Get

Favicons (7 sizes)

16×32×48×96×128×196×512px icons for browser tabs, bookmarks, and desktop shortcuts

Android Icons (6 sizes)

48×72×96×144×192×512px icons for Android apps and home screens

iOS Icons (5 sizes)

60×76×120×152×180px icons for iOS apps and home screens

Additional Files

manifest.json for PWAs and HTML link tags ready to use

React Favicon Implementation

Adding a favicon to a React app is straightforward. The process depends on your build tool (Create React App, Vite, or custom setup), but the general approach is the same: place favicon files in the public directory and reference them in your HTML.

Use our free favicon generator to convert your logo to favicon, then follow the steps below for your specific React setup.

Method 1: Create React App

For Create React App projects, add favicons to the public directory:

Generate your favicon files using our logo to favicon tool
Replace the default favicon.ico in the public directory
Add additional favicon sizes to the public directory
Update public/index.html with favicon link tags

<!-- public/index.html -->
<head>
  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicon-96x96.png">
  <link rel="apple-touch-icon" sizes="196x196" href="%PUBLIC_URL%/favicon-196x196.png">
</head>

Method 2: Vite React

For Vite React projects, the process is similar:

Generate favicon files using our React favicon generator
Place favicon.ico in the public directory
Add other favicon sizes to the public directory
Update index.html in the root directory with favicon links

Vite automatically serves files from the public directory at the root URL.

React Favicon Sizes

For optimal React favicon support, include these sizes:

16x16: Browser tabs (most common)
32x32: Browser bookmarks
96x96: Android home screen
196x196: Apple touch icon
512x512: High-resolution displays and PWAs

Our React favicon generator creates all these sizes automatically.

Adding Manifest.json for PWA Support

For Progressive Web App support in React, add a manifest.json file to your public directory and reference it in your HTML:

<!-- index.html -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

<!-- public/manifest.json -->
{
  "name": "Your React App",
  "short_name": "App",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone"
}

Our favicon generator includes a ready-to-use manifest.json file with all icon references.

Best Practices for React Favicons

Always use %PUBLIC_URL% in Create React App for correct paths
Provide multiple sizes for different devices and contexts
Test your favicon in both light and dark browser themes
Ensure your favicon works at small sizes (16x16 pixels)
Use our free favicon generator to create all required sizes at once
For Vite projects, reference files directly without %PUBLIC_URL%

Related Resources

Free Favicon Generator

Convert your logo to favicon and generate all required sizes for your React app.

Favicon Sizes Guide

Learn about the best favicon sizes for modern websites and PWAs.