Configuring Favicons in React Apps

Configure static brand assets in single-page React apps. Learn how to map public folders.

Where to Put Favicon Files in React

Regardless of whether you are using Vite, Create React App, or Next.js, all static files like favicons belong inside the public/ directory at the root of your project.

  1. Convert your PNG using our homepage generator to retrieve the files ZIP.
  2. Extract all files directly into the public/ folder in your React project root.
  3. Open index.html (located in project root for Vite, or inside public/ for Create React App).
  4. Add or modify the standard HTML head meta tags, pointing relative URLs to the public directory:
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">