How to Add PWA Icons to Angular Apps
Building an Angular Progressive Web App with Riff, Cursor, Lovable, or v0? You're almost ready to deploy—except for one critical piece: PWA icons.
Quick Answer: 3 Steps to PWA Icons in Angular
- 1Generate icons: Use Imagcon to create all 19 required PWA icon sizes from a text prompt
- 2Add to Angular: Place icons in
src/assets/icons/and update manifest.json - 3Enable service worker: Run
ng add @angular/pwato configure PWA support
What Are PWA Icons in Angular?
PWA icons (also called app icons or web app icons) are the images that appear when users install your Angular Progressive Web App on their device. They show up on the home screen, app drawer, and task switcher.
Angular apps require 19 different icon sizes to display properly across all devices:
- Android: 192x192, 512x512 (standard), 196x196, 512x512 (maskable)
- iOS: 180x180, 167x167, 152x152, 120x120
- Desktop: 512x512, 384x384, 256x256, 192x192
Step-by-Step: Add PWA Icons to Angular
Step 1: Install Angular PWA Support
First, add PWA capabilities to your Angular app. This command installs the service worker and creates a default manifest.json:
ng add @angular/pwaThis creates src/manifest.webmanifest and ngsw-config.json
Step 2: Generate Your PWA Icons
Use Imagcon to generate all 19 required icon sizes in 30 seconds:
- 1.Go to Imagcon Workspace
- 2.Enter a text prompt: "Red angular logo for task manager app"
- 3.Click Generate → Download PWA Icons ZIP
💡 Pro Tip: Already have a logo? Upload it to Imagcon's editor and it will automatically resize to all 19 PWA sizes.
Step 3: Add Icons to Angular Project
Extract the ZIP and place icons in your Angular assets folder:
your-angular-app/
├── src/
│ ├── assets/
│ │ └── icons/
│ │ ├── icon-192x192.png
│ │ ├── icon-512x512.png
│ │ ├── icon-maskable-192x192.png
│ │ ├── icon-maskable-512x512.png
│ │ └── ... (15 more sizes)
│ └── manifest.webmanifestStep 4: Update manifest.webmanifest
Open src/manifest.webmanifest and update the icons array:
{
"name": "My Angular App",
"short_name": "MyApp",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "assets/icons/icon-maskable-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "assets/icons/icon-maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Step 5: Build & Deploy
Build your Angular PWA for production:
ng build --prod
# Deploy to your hosting (Netlify, Vercel, Firebase, etc.)
ng deployYour Angular PWA is now installable! Test it:
- Chrome: Click the install icon in the address bar
- Mobile: "Add to Home Screen" in browser menu
- Lighthouse: Run PWA audit to verify setup
PWA Icons for Ionic Framework
If you're using Ionic with Angular, the process is similar but icons go in src/assets/ and you may need to configure Capacitor for native builds:
// For Capacitor (iOS/Android native)
ionic capacitor add ios
ionic capacitor add android
// Copy icons to native projects
npx capacitor-assets generate --iconBackgroundColor '#000000'Imagcon also generates iOS splash screens and Android adaptive icons which Ionic/Capacitor apps need.
Common Angular PWA Issues
❌ Icons not showing after install
Solution: Make sure paths in manifest.webmanifest match actual file locations. Angular uses assets/icons/ not /assets/icons/
❌ Service worker not registering
Solution: Service workers only work on HTTPS or localhost. Check angular.json has "serviceWorker": true in production config
❌ App not installable on mobile
Solution: Verify manifest.webmanifest has "display": "standalone" and at least 192x192 + 512x512 icons
Generate Angular PWA Icons in 30 Seconds
Create all 19 required icon sizes with AI. No Photoshop needed.
Start Free