PWA Icons for Vibe Coders: Bolt, v0 & Replit

Name: Imagcon
Author: Imagcon

Vibe coding with Bolt.new, v0, or Replit gets you to a working app fast — but none of them generate your icon files. Here's the fastest path: generate your icons with Imagcon, upload them, then use these exact prompts to configure your project.

The 3-Step Process (Same for All Platforms)

Generate

Use Imagcon to generate all 19 icon sizes + manifest.json from a text prompt

Upload

Upload the icon files to your project's /public/icons/ directory

Prompt

Tell your platform's AI to wire up manifest.json and add the HTML link tags

Generate Your Icons

Go to imagcon.app, describe your icon in plain language, and download the ZIP. You'll get:

All 19 PWA icon sizes (72px to 512px)
Maskable icons for Android adaptive launcher
iOS App Store icons (13 sizes)
iOS splash screens (16 device sizes)
A ready-to-use manifest.json

Bolt.new

Bolt runs Vite or Next.js projects in the browser. Here's how to add icons:

Uploading Files in Bolt

1. In the Bolt editor, look for the file tree on the left
2. Right-click public/ → New Folder → name it icons
3. Drag your icon PNG files from the Imagcon ZIP into public/icons/
4. Drag manifest.json into public/
5. Then use this prompt in Bolt's chat:

Bolt chat prompt

I have my PWA icon files ready from Imagcon. Please:
1. Create a /public/icons/ folder and note that I'll upload the icon PNG files there
2. Create /public/manifest.json with proper PWA configuration pointing to /icons/
3. Add <link rel="manifest" href="/manifest.json"> and <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> to index.html

Bolt gotcha: If Bolt can't access your uploaded files via drag-and-drop, use the prompt above first to create the folder structure, then upload the files via the file tree.

v0 by Vercel

v0 generates Next.js code. The icon setup uses Next.js metadata API or the public/ folder:

v0 Icon Setup

File	Where in v0 project
Icon PNGs	public/icons/icon-*.png
manifest.json	public/manifest.json
apple-touch-icon	public/icons/apple-touch-icon.png
favicon.ico	public/favicon.ico or app/favicon.ico

Then use the prompt below in the v0 chat to set up the metadata:

v0 chat prompt

Set up PWA icons for this Next.js app. I have icon files ready to place in /public/icons/.
Please update the Next.js metadata in layout.tsx to include:
- manifest reference
- apple-touch-icon
- theme-color
Also create public/manifest.json pointing to /icons/icon-{size}x{size}.png files.

v0 tip: For Next.js App Router, v0 may prefer to use the metadata export in layout.tsx instead of a separate manifest.json. Both approaches work — just be consistent.

Replit

Replit supports file uploads directly in the file tree. It works with any framework (Vite, Next.js, plain HTML).

Uploading to Replit

1. In Replit, click the Files icon in the left sidebar
2. Find or create your public/ folder (or static/ for some templates)
3. Create an icons/ subfolder inside it
4. Click the three-dot menu on the folder → Upload → select all icon PNGs from your Imagcon ZIP
5. Upload manifest.json to the public/ root
6. Use Replit's AI assistant (if available) or edit index.html directly:

Replit AI prompt

I need to add PWA icons to this project. I'll upload my icon files to the /public/icons/ directory.
Please:
1. Create or update manifest.json in /public/ with proper icon references
2. Add the manifest link and apple-touch-icon meta tags to index.html
3. Make sure the icon paths use /icons/ prefix

Replit tip: If your Replit project uses Express or Flask (serving static files manually), make sure your server is configured to serve the public/ directory. Look for app.use(express.static('public')) or equivalent.

Platform Comparison

Platform	File Upload Method	AI Can Edit Files	PWA Difficulty
Bolt.new	Drag & drop into file tree	Yes	Easy
v0 by Vercel	GitHub / manual in deployment	Yes (Next.js metadata)	Medium
Replit	Upload via file tree	Replit AI (limited)	Easy
Cursor	Direct filesystem access	Yes	Easiest
Lovable	Upload via sidebar	Yes	Easy

manifest.json Template

Use this for any of the platforms above. Adjust name, theme_color, and icon paths as needed:

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-512x512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Generate All Your PWA Icons in 30 Seconds

Describe your icon, download the complete ZIP with all sizes and manifest.json, then follow the steps above for your platform. No design skills needed.

50 free generations during beta • No credit card required