Stop Resizing PWA Icons by Hand: I Built a CLI to Automate It in Seconds 🚀

Source: Dev.to

Introduction

As frontend developers, we all love the idea of Progressive Web Apps (PWAs). However, the initial setup can be tedious. Every time I start a new React or Vite project, I end up opening an image editor to resize my master logo into various sizes (192x192, 512x512, apple‑touch‑icon, favicon) and then manually writing the manifest.json file with correct paths. This slows down development, so I created a solution.

Meet pwa‑gen

npx @muhammaddariazzidane/pwa-gen

A lightweight, interactive CLI tool that automates the entire icon generation and manifest creation process. Just point it to your master image, answer a few prompts, and you’re done.

What Does It Do?

Instant Icon Generation

Creates all the necessary sizes for modern browsers and iOS:

• 192x192
• 512x512
• 180x180
• 64x64

Smart Maskable Icons

For Android PWAs, the CLI asks for a hex background color, shrinks your logo slightly, and adds appropriate padding to keep the logo within the safe zone.

Auto‑Generated manifest.json

Prompts for your app name and theme color, then writes a correctly formatted standalone manifest.json with absolute icon paths.

Smart Path Auto‑Correction

Detects your public directory automatically, ensuring files are generated in the right location.

Perfect for Vite Users

Add the generated manifest to your Vite configuration:

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [
    VitePWA({
      manifest: false, // Use the standalone manifest.json generated by pwa-gen
      injectRegister: 'auto'
    })
  ]
};

Contribute

The source code is available on GitHub. Feel free to inspect the Node.js file‑system logic or contribute:

👉 https://github.com/muhammaddariazzidane/pwa-gen.git

Happy coding! 💻✨