DEV Community

Muhammad Dariaz Zidane
Muhammad Dariaz Zidane

Posted on

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

#javascript #webdev #productivity #react

As frontend developers, we all love the idea of Progressive Web Apps (PWAs). But let's be honest: the initial setup is tedious.

Every time I start a new React or Vite project, I find myself opening an image editor just to resize my master logo into 192x192, 512x512, apple-touch-icon, and favicon. Then, I have to manually write the manifest.json file and make sure all the paths are perfectly linked

It kills the momentum. So, I decided to fix it.

I built a lightweight, interactive CLI tool to automate the entire process. Just point it to your master image, answer a few prompts, and you're done.

📦 Meet pwa-gen
You don't even need to install it. You can run it instantly in any of your project directories using npx:

npx @muhammaddariazzidane/pwa-gen
Enter fullscreen mode Exit fullscreen mode

CLI DEMO

✨ What Does It Do?
Under the hood, this tool is powered by sharp (for blazing-fast image processing) and @clack/prompts (for that beautiful, modern terminal UI).

Here is what it handles for you:

  • Instantly Generates Standard Icons: Creates all the necessary sizes for modern browsers and iOS (192x192, 512x512, 180x180, 64x64).

  • Smart Maskable Icons: Android PWAs need "safe zones" so your logo doesn't get cut off. The CLI asks for a hex background color, shrinks your logo slightly, and adds the perfect padding automatically.

  • Auto-Generates manifest.json: It asks for your App Name and Theme Color, then writes a perfectly formatted standalone manifest file linked to your new absolute icon paths.

  • Smart Path Auto-Correction: It automatically detects your public directory so you never accidentally generate files in the wrong place.

⚡ Perfect for Vite Users
If you are using vite-plugin-pwa, managing the manifest directly inside vite.config.js/ts can get messy. pwa-gen asks if you are using Vite and automatically configures a standalone manifest.json in your public folder.

You just need to tell your Vite config to use the generated file:

VitePWA({
  manifest: false, // Tell the plugin to use our standalone manifest.json
  injectRegister: 'auto'
})
Enter fullscreen mode Exit fullscreen mode

🤝 Let's Build Together
This is version 1.1.0 and my first open-source tooling project. I built it to solve my own itch, but I hope it speeds up your workflow too!

You can check out the source code, inspect how I handled the Node.js file system logic, or contribute on GitHub:

👉 https://github.com/muhammaddariazzidane/pwa-gen.git
If you find this tool helpful, I'd really appreciate a ⭐ on GitHub! Let me know in the comments if you have any feature requests or feedback.

Happy coding! 💻✨

Top comments (0)