App Settings & PWA Guide

PWA Assets & Icon Location Guide

Where to place your app icons, logos, manifests, and PWA static files in Next.js.

Where to Put Your Icons & Logo

In Next.js, all static PWA icons, logos, and favicons MUST be placed inside the public/ directory (specifically inside public/icons/). Files in public/ are directly served by Next.js at the root URL (e.g., /icons/icon-192x192.png).

samplepwa/

├── public/

├── favicon.ico (Browser tab icon)

├── icons/

├── icon-192x192.png (Android / Mobile homescreen icon)

├── icon-512x512.png (High-res / Splash screen & desktop)

├── apple-touch-icon.png (iOS Safari home icon)

└── logo.png (App logo graphic)

└── screenshots/

├── desktop.png (Desktop store install preview)

└── mobile.png (Mobile store install preview)

├── app/

├── manifest.ts (Generates webmanifest & links icons)

├── layout.tsx (Root metadata & mobile bottom nav)

└── next.config.ts (@ducanh2912/next-pwa wrapper config)

Icon Format Checklist

192x192 PNG: Mobile launcher icon for Android & Chrome.
512x512 PNG: Desktop window icon & splash screen background.
180x180 Apple Touch Icon: Required for iOS Safari "Add to Home Screen".
Maskable attribute: Set in manifest.ts so Android can crop icons into circles/squircles cleanly.

PWA Package Installed

We installed @ducanh2912/next-pwa — the most reliable and actively maintained PWA package for Next.js App Router.

pnpm add @ducanh2912/next-pwa lucide-react