How to Add PWA Icons to Vue.js Apps

Name: Imagcon
Author: Imagcon

Building a Vue Progressive Web App with Riff, Cursor, Lovable, or v0? You're almost ready to deploy—except for one critical piece: PWA icons.

Key Facts

Vue CLI has built-in PWA plugin with automatic icon generation
Minimum required: 192×192 and 512×512 PNG files in both "any" and "maskable" purposes
Nuxt.js uses @nuxt/pwa module for automatic PWA setup
Icons go in /public folder for all Vue setups

What Are PWA Icons in Vue Apps?

PWA icons are the app icons that appear when users install your Vue application on their device's home screen. They work identically to native iOS and Android app icons.

Vue's ecosystem provides excellent PWA support through plugins like @vue/cli-plugin-pwa and @nuxtjs/pwa, making implementation straightforward.

Step-by-Step Implementation

Step 1: Install PWA Plugin (Vue CLI)

If using Vue CLI, add the official PWA plugin:

vue add pwa

This automatically creates manifest.json, service worker, and PWA configuration in vue.config.js.

Using Vite? Install vite-plugin-pwa instead: npm install vite-plugin-pwa -D

Step 2: Add Your Icons

Place icon files in the public directory:

public/
  ├── img/
  │   └── icons/
  │       ├── icon-192x192-any.png
  │       ├── icon-192x192-maskable.png
  │       ├── icon-512x512-any.png
  │       └── icon-512x512-maskable.png
  └── manifest.json

Pro Tip: Use Imagcon to generate all required sizes automatically.

Step 3: Configure manifest.json

Update public/manifest.json:

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

Step 4: Link Manifest in HTML

Add to public/index.html in the <head>:

<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#42b983" />

Vue CLI users: The PWA plugin adds this automatically when you run vue add pwa.

Framework-Specific Configuration

Vue CLI + PWA Plugin

Configure via vue.config.js:

module.exports = {
  pwa: {
    name: 'My Vue App',
    themeColor: '#42b983',
    manifestOptions: {
      icons: [
        // Your icon config
      ]
    }
  }
}

Vite + Vue

Use vite-plugin-pwa in vite.config.js:

import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
      manifest: {
        name: 'My Vue App',
        icons: [
          // Your icon config
        ]
      }
    })
  ]
}

Nuxt.js

Install @nuxtjs/pwa and configure in nuxt.config.js:

export default {
  modules: ['@nuxtjs/pwa'],
  pwa: {
    manifest: {
      name: 'My Nuxt App',
      lang: 'en'
    },
    icon: {
      source: '/icon.png',
      fileName: 'icon.png'
    }
  }
}

How to Test Your PWA Icons

1.
Build for production
Run npm run build and serve the dist folder
2.
Open Chrome DevTools
F12 → Application tab → Manifest section
3.
Verify all icons load
Check for both "any" and "maskable" purposes
4.
Test installation
Click install icon in address bar (Chrome/Edge)

Generate All PWA Icons Instantly

Imagcon creates all 19 required PWA icon sizes for Vue apps with one AI prompt. No Photoshop needed.

Try Imagcon Free

← React Guide Icon Size Requirements FAQ