Tutorial
February 23, 2026
4 min read
0 views
How to Add PWA Icons to Your App (React, Vue, Angular)
Step-by-step guide to adding PWA icons to React, Vue, and Angular apps. Practical tutorial for developers.
By Imagcon Team
Quick Answer:
## Quick Answer Generate the icon files, place them in your public assets folder, reference them from manifest.json, and add the platform meta tags your framework needs.
## Quick Answer Generate the icon files, place them in your public assets folder, reference them from manifest.json, and add the platform meta tags your framework needs. ## Introduction You have built a fantastic web application using React, Vue, or Angular, and now you want to elevate it to a Progressive Web App (PWA). A crucial, non-negotiable step in this process is adding properly formatted PWA icons. Without proper icons, your application will not be installable, and it will fail to look like a native app on a user's home screen. In this comprehensive tutorial, we will walk through the practical, framework-agnostic steps of adding PWA icons to modern JavaScript web apps. ## Step 1: Generate Your Icon Assets Before touching a single line of code, you must secure the actual image files. You cannot just take a single 50x50 PNG, drop it in, and hope for the best. At an absolute minimum, the PWA spec requires: * A exactly 192x192 pixel PNG file. * A exactly 512x512 pixel PNG file. * An Apple Touch Icon (usually an 180x180 pixel PNG with a solid background, no transparency). It is highly recommended to use a dedicated icon generator tool to convert your base logo into all the required sizes, formats, and maskable variations perfectly. ## Step 2: Place Icons in the Public Directory Modern JavaScript frameworks handle static assets differently than compiled source code. You need to place your generated icons in a folder where they will not be aggressively bundled or hashed by Webpack or Vite, but rather served directly at the root level of your domain. * **React (Create React App):** Place all icon files in the `public/` folder. * **React (Next.js):** Place all icon files in the `public/` folder. * **Vue (Vite):** Place all icon files in the `public/` folder. * **Angular:** Place all icon files in the `src/assets/` folder (and ensure it is properly configured in the `assets` array of your `angular.json`). ## Step 3: Create and Configure `manifest.json` Next, create a file named `manifest.json` (or `site.webmanifest`) in that same public directory. This configuration file strictly tells the browser about your app and exactly where to find the icons. Here is a robust standard example: ```json { "name": "My Awesome Application", "short_name": "AwesomeApp", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [ { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }, { "src": "/icon-maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ] } ``` *Important Note: Ensure the `src` paths match exactly where your framework routes your public assets. A 404 error here breaks installation immediately.* ## Step 4: Link the Manifest and Meta Tags in HTML Finally, you must link your manifest and provide vital fallback tags for iOS directly in your main HTML template file. * **React (CRA/Vite) / Vue:** Edit the root `index.html`. * **Next.js:** Edit the custom `_document.tsx` or use the native Metadata API in Next 13+. * **Angular:** Edit the `src/index.html`. Add the following critically important tags inside the `<head>`: ```html <!-- Link to the manifest --> <link rel="manifest" href="/manifest.json" /> <!-- Theme color for browser UI --> <meta name="theme-color" content="#000000" /> <!-- Apple Touch Icon for iOS compatibility --> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> ``` ## Step 5: Test Installability Run your application locally. Open Chrome DevTools, navigate to the **Application** tab, and select **Manifest** on the left sidebar. Chrome will thoroughly analyze your setup and tell you if your manifest is valid and if all the icons are detected properly without errors. If everything shows up green, your framework app is now fully configured with standard PWA icons and ready for installation!