May 2026·4 min read

Favicon Generator for React: From Upload to <head> in 60 Seconds

React doesn't have a built-in favicon pipeline. Whether you're on Create React App (legacy), Vite, or a custom webpack setup, you're responsible for dropping the right files into public/ and wiring up the tags. Here's the fastest way to do it right.

Step 1: Generate your favicon set

You need more than one file. A proper favicon set for a React app includes:

favicon.ico — browser tab icon (16, 32, 48px baked in)
favicon-32x32.png — retina browser tabs
favicon-16x16.png — classic browser tabs
apple-touch-icon.png — 180×180 for iOS
android-chrome-192x192.png + 512x512.png
manifest.json — required for PWA install

The manual approach: open Photoshop or Figma, export each size, run png-to-ico, write the manifest by hand. The fast approach: upload your SVG or PNG to Snappicon and download a ZIP with everything pre-generated.

Step 2: Add files to your project

Move the files from the ZIP into your public/ folder:

public/
  favicon.ico
  favicon-32x32.png
  favicon-16x16.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  manifest.json

Step 3: Add the tags to index.html

In Vite or CRA, edit index.html in the project root:

<head>
  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
  <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/manifest.json" />

  <!-- OG / Social -->
  <meta property="og:image" content="https://yourdomain.com/og-image.png" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="https://yourdomain.com/og-image.png" />
</head>

For Next.js App Router

Skip index.html — use file-based metadata instead. Drop favicon.ico and apple-icon.png directly into app/ and Next.js generates the tags automatically. See our Next.js favicon guide for the full walkthrough.

Why isn't my favicon updating?

Browsers cache favicons aggressively — sometimes for days. If you update your favicon and the old one keeps showing:

Hard refresh — Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows) clears the browser cache for the page.
Open in a private/incognito window — No cache, so you always see the latest.
Clear favicon cache specifically — In Chrome: open DevTools → Application → Clear storage → check Favicons → Clear site data.
Append a cache-buster — <link rel="icon" href="/favicon.ico?v=2" /> — forces a fresh fetch.

Generate your React favicon set in one upload

Upload a PNG or SVG and get a complete favicon set — .ico, all PNG sizes, apple-touch-icon, PWA icons, manifest.json, and a copy-paste head snippet — in a single ZIP. Free forever for one generation per day.

Generate for free