How to Add PWA Icons to React Apps

Name: Imagcon
Author: Imagcon

Make your React application installable with proper PWA icons. This guide covers Create React App, Vite, and Next.js with complete manifest.json configuration and all required icon sizes.

Key Facts

PWA icons require 192×192 and 512×512 PNG files minimum
You need both "any" and "maskable" icon purposes for Android
manifest.json must be linked in public/index.html
Icons go in /public folder (Create React App) or /public/icons (Vite/Next.js)

What Are PWA Icons?

PWA (Progressive Web App) icons are the app icons that appear on a user's home screen when they install your React web app. They function exactly like native app icons on iOS and Android.

Unlike favicons (which appear in browser tabs), PWA icons need to be larger, work across different devices, and support special Android features like "maskable" icons that adapt to different device shapes.

Step-by-Step Implementation

Step 1: Generate Your Icons

You need at least two icon sizes for a basic PWA:

•192×192 - Used on Android home screens and app lists
•512×512 - Used for splash screens and high-res displays

Pro Tip: Use Imagcon's AI generator to create all 19 required PWA icon sizes automatically. No design skills needed.

Step 2: Place Icons in Public Folder

Place your icon files in the public directory:

// Create React App
public/
  ├── icon-192x192-any.png
  ├── icon-192x192-maskable.png
  ├── icon-512x512-any.png
  ├── icon-512x512-maskable.png
  └── manifest.json

// Vite or Next.js
public/
  ├── icons/
  │   ├── icon-192x192-any.png
  │   ├── icon-192x192-maskable.png
  │   ├── icon-512x512-any.png
  │   └── icon-512x512-maskable.png
  └── manifest.json

Step 3: Create manifest.json

Create or update public/manifest.json:

{
  "name": "My React App",
  "short_name": "React App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192x192-any.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-192x192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon-512x512-any.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512x512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Note for Vite/Next.js: If icons are in /public/icons/, use "/icons/icon-192x192-any.png" as the path.

Step 4: Link Manifest in HTML

Add this line to your public/index.html inside the <head> tag:

<link rel="manifest" href="/manifest.json" />

Create React App users: This link is usually already present by default. Double-check it's there.

Framework-Specific Notes

Create React App (CRA)

•manifest.json is created by default - just update the icons array
•Icons go directly in /public folder (not /public/icons)
•Service worker is opt-in via serviceWorkerRegistration.js

Vite

•Use vite-plugin-pwa for automatic manifest and service worker generation
•Create manifest.json manually or configure via plugin
•Icons typically go in /public/icons/

Next.js

•manifest.json goes in /public folder
•Add manifest link in _document.js or app layout
•Use next-pwa plugin for automatic PWA configuration

How to Test Your PWA Icons

1.
Run your app locally
Start your dev server and open in Chrome
2.
Open Chrome DevTools
Press F12 → Go to "Application" tab → Click "Manifest" in sidebar
3.
Verify icons appear
You should see all icon sizes with preview images
4.
Test installation
Click the install icon in Chrome's address bar to test the installation flow

Common Issues

❌ Icons not showing in manifest

Solution: Check file paths are correct. For Create React App, icons should be in /public, not /public/icons. Clear cache and hard reload (Cmd/Ctrl + Shift + R).

❌ App not installable

Solution: Ensure you have both 192×192 and 512×512 icons, manifest is linked in HTML, and you're using HTTPS (localhost works too).

❌ Maskable icons look wrong on Android

Solution: Maskable icons need 20% safe zone padding. Your logo should be centered with empty space around edges.

Generate All PWA Icons in Seconds

Skip the manual resizing. Imagcon's AI creates all 19 required PWA icon sizes, including maskable variants, with one prompt.

Try Imagcon Free

← Back to Home Vue.js Guide →Icon Size Requirements FAQ