PWA Icons for Vibe Coders: Cursor, Claude & Lovable

Name: Imagcon
Author: Imagcon

Vibe coding is fast — until your AI asks for icons. Here's the exact workflow: use Imagcon to generate a complete, deployment-ready icon set, then paste one prompt into Cursor, Claude Code, or Lovable to wire everything up.

Why AI Coding Tools Can't Generate Icons Themselves

Cursor, Claude Code, and Lovable are exceptional at writing code — but they can't generate image files. When they scaffold a PWA, they'll add placeholder references in manifest.json but leave you to source the actual image files.

This guide bridges that gap: generate the images with Imagcon, then tell your AI assistant exactly how to wire them up.

Generate Your Icons with Imagcon

Go to imagcon.app, sign in for free, and describe your icon in plain language — the same way you'd describe it to an AI.

Example prompts that work well

"Dark blue gradient with a white lightning bolt"
"Minimal green leaf on white background, flat design"
"Purple abstract wave, modern SaaS style"

What you'll download: A ZIP file containing all 19 PWA icon sizes, maskable variants, iOS splash screens, and a pre-configured manifest.json.

Place the Files in Your Project

The correct folder depends on your framework. All modern frameworks serve a /public folder at the site root:

Framework / Tool	Place icons at	manifest.json at
Vite (React/Vue/Svelte)	/public/icons/	/public/manifest.json
Create React App	/public/icons/	/public/manifest.json
Next.js (App Router)	/public/icons/	/public/manifest.json
Lovable (Vite under the hood)	/public/icons/	/public/manifest.json
Cursor project (any framework)	Same as above — check package.json	Same as above

Tip: In Cursor, you can drag files directly into the Explorer panel. In Lovable, use the file upload button in the left sidebar.

Verify Your manifest.json

Imagcon includes a manifest.json in your download — but if you need to create or update one manually, use this template:

public/manifest.json

{
  "name": "Your App Name",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" },
    {
      "src": "/icons/icon-192x192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Tell Your AI Assistant to Wire It Up

CCursor

Open Cursor's AI chat (Cmd+L / Ctrl+L) and paste this prompt:

Cursor chat prompt

I downloaded my PWA icons from Imagcon. The ZIP contains:
- /icons/ folder with icon-72x72.png through icon-512x512.png
- icon-512x512-maskable.png (for Android)
- manifest.json (ready to use)
- splash/ folder with iOS launch images

Please:
1. Copy all files from /icons/ to /public/icons/
2. Copy manifest.json to /public/manifest.json
3. Add <link rel="manifest" href="/manifest.json"> to index.html
4. Add <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> to index.html

AClaude Code (CLI)

In your terminal with Claude Code running:

Claude Code prompt

I downloaded my PWA icons from Imagcon. The ZIP contains:
- /icons/ folder with icon-72x72.png through icon-512x512.png
- icon-512x512-maskable.png (for Android)
- manifest.json (ready to use)
- splash/ folder with iOS launch images

Please:
1. Copy all files from /icons/ to /public/icons/
2. Copy manifest.json to /public/manifest.json
3. Add <link rel="manifest" href="/manifest.json"> to index.html
4. Add <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> to index.html

Claude Code has direct file system access and will move the files and update your HTML automatically.

LLovable

Upload your icon files via Lovable's file manager, then use the chat:

1. Click the file icon in the left sidebar → Upload Files
2. Navigate to public/icons/ or create the folder first
3. Upload all icon PNG files from your Imagcon ZIP
4. In the Lovable chat, paste this prompt:

Lovable chat prompt

I have my PWA icon files ready. I need to:
1. Add these icon files to the /public/icons/ directory
2. Set up manifest.json for PWA installability
3. Link the manifest in index.html

The manifest.json should reference icons at /icons/icon-{size}x{size}.png
Include 192x192 and 512x512 as required, plus a maskable 192x192 for Android.

Verify It's Working

Chrome DevTools (Recommended)

1.Open your app in Chrome
2.DevTools → Application tab
3.Left panel: Manifest
4.Check icons load without errors
5.Check 'Add to homescreen' button appears

Lighthouse PWA Audit

1.DevTools → Lighthouse tab
2.Check 'Progressive Web App'
3.Click 'Analyze page load'
4.Look for installability criteria
5.Fix any red icon-related items

Common Issues & Fixes

Problem: Icons not showing in DevTools → Application

Fix: Check that <link rel="manifest" href="/manifest.json"> is in your index.html <head>.

Problem: Manifest loads but icons return 404

Fix: The paths in manifest.json must match where you placed the files. If icons are at /public/icons/, they're served at /icons/ — use "/icons/icon-192x192.png".

Problem: 'Not installable' warning in Lighthouse

Fix: You need both a 192×192 and 512×512 icon. Also ensure display is set to "standalone" or "fullscreen" in manifest.json.

Problem: Apple touch icon not working on iOS

Fix: Add <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> to your HTML <head>.

Generate Your Icon Set in 30 Seconds

Describe your icon in plain English. Imagcon generates all sizes, maskable variants, and manifest.json — ready to drop into your Cursor or Lovable project.

50 free generations during beta • No credit card required