Chrome Web Store Assets Generator

Generate all required icons and promotional tiles for the Chrome Web Store — instantly, in your browser.

🌐 Live Demo · 📚 Official Chrome Docs · 🤝 Contributing · 🐛 Report Bug

---

✨ What is this?

Chrome Web Store Assets Generator is a free, open-source, browser-based tool that takes your extension's logo and automatically generates every icon size and promotional tile required by the Chrome Web Store — all in one click, with no server, no upload, no sign-up.

Built with React, TypeScript, Vite, and the HTML5 Canvas API. All processing happens 100% client-side.

---

🚀 Features

• One-click generation — upload your logo once, get all assets instantly
• All official sizes — icons (16×16, 32×32, 48×48, 128×128) and promotional tiles (Small, Large, Marquee)
• Customizable banners — set your extension name, subtitle, and pick from gradient palettes
• Adjustable icon padding — fine-tune spacing with a live preview
• Store Preview tab — see how your listing will look on the Chrome Web Store
• Manifest v3 snippet — copy-paste-ready manifest.json icons block
• ZIP download — download all assets at once, organised into icons/ and banners/ folders
• 100% client-side — nothing leaves your browser; no API key needed for image generation
• Dark/light gradients — multiple palettes to match your brand

---

📐 Chrome Web Store Image Specifications

The table below lists every image asset the Chrome Web Store can use and whether this tool generates it automatically.

Asset	Size	Format	Required?	Generated?
Extension icon (manifest)	16×16 px	PNG	✅ Required	✅ Yes
Extension icon (manifest)	32×32 px	PNG	✅ Required	✅ Yes
Extension icon (extensions page)	48×48 px	PNG	✅ Required	✅ Yes
Extension icon (store + install)	128×128 px	PNG	✅ Required	✅ Yes
Small promotional tile	440×280 px	PNG / JPG	⬜ Optional	✅ Yes
Large promotional tile	920×680 px	PNG / JPG	⬜ Optional	✅ Yes
Marquee promotional tile	1400×560 px	PNG / JPG	⬜ Optional	✅ Yes
Screenshots	1280×800 or 640×400 px	PNG / JPG	✅ Required (min 1)	❌ Not yet

Note: Screenshots must be manually crafted to showcase your extension's actual UI. All other assets can be generated by this tool.

Source: Chrome Web Store developer documentation

---

🛠️ Getting Started

Option 1 — Docker Hub (Fastest)

The quickest way to run the tool without cloning the repository. Requires Docker.

docker run -d -p 3000:80 --name assets-generator paladini/chrome-web-store-assets-generator:latest

Open http://localhost:3000 in your browser.

To stop and remove the container:

docker stop assets-generator && docker rm assets-generator

Option 2 — Docker Compose

Ideal for self-hosting alongside other services.

Using the remote image (No clone needed):

Create a docker-compose.yml file:

services:
  app:
    image: paladini/chrome-web-store-assets-generator:latest
    ports:
      - "3000:80"
    restart: unless-stopped

Then run: docker compose up -d

Using the local source (For developers):

git clone https://github.com/paladini/chrome-web-store-assets-generator.git
cd chrome-web-store-assets-generator

docker compose up -d --build

Open http://localhost:3000 in your browser.

Option 3 — Node.js

Prerequisites: Node.js 18+

# Clone the repository
git clone https://github.com/paladini/chrome-web-store-assets-generator.git
cd chrome-web-store-assets-generator

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000 in your browser.

Build for production

npm run build

The output will be in the dist/ folder. Serve it with any static file server.

---

📖 How to Use

1. Upload your logo — drag & drop or click the upload area. Any image format is supported (PNG, SVG, JPG, WebP). Recommended minimum: 512×512 px for best results.
2. Customise — adjust icon padding, set your extension name and subtitle, and choose a gradient colour palette for the promotional banners.
3. Generate — assets are generated automatically as you make changes. Switch between the Icons, Banners, and Store Preview tabs.
4. Download — click Download All (.zip) to get a ZIP archive organised into icons/ and banners/, or download individual files.
5. Add to your manifest — use the Manifest Snippet to copy the ready-to-use icons block into your manifest.json.

---

🏗️ Tech Stack

Technology	Role
React 19	UI framework
TypeScript	Type safety
Vite 6	Build tool & dev server
Tailwind CSS v4	Styling
Lucide React	Icons
JSZip	ZIP archive generation
Sonner	Toast notifications
canvas-confetti	Celebration effect
HTML5 Canvas API	Client-side image processing

---

🤝 Contributing

Contributions are welcome and appreciated! Please read CONTRIBUTING.md before opening a pull request.

# Fork the repo, create a feature branch
git checkout -b feature/your-feature-name

# Make your changes, then run type-checking
npm run lint

# Open a PR against main

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

👤 Author

Fernando Paladini — @paladini

If this project saved you time, consider giving it a ⭐ on GitHub!

---

_{Built with ❤️ for the Chrome extension developer community}