Chrome extension icons come in three standard sizes, and you need all three

Chrome extension icons are not one size. You need to provide three separate images: 16 pixels, 48 pixels, and 128 pixels, measured in width and height. Each one serves a different place in Chrome — the toolbar shows one size, the extension management page shows another, and the Chrome Web Store uses the largest. If you only upload one size, Chrome will stretch or shrink it, and the result looks blurry or pixelated.

The reason you need three versions is that each location on screen has a fixed space, and scaling a small image up or a large image down always loses quality. A 16-pixel icon blown up to 128 pixels looks like a blocky mess. A 128-pixel icon squeezed down to 16 pixels loses all detail. Making three versions means each one is drawn at the right size from the start.

Key Takeaways

  • Chrome requires three icon sizes: 16×16 pixels for the toolbar, 48×48 pixels for the extension management page, and 128×128 pixels for the Chrome Web Store.
  • Each icon should be a separate image file, not one image scaled three ways, because scaling always reduces quality.
  • Icons must be PNG or JPEG format, with PNG recommended because it supports transparency.
  • You specify which icon file goes where in your extension's manifest.json file, the configuration file that tells Chrome how your extension works.

The 16-pixel icon: your toolbar button

The 16×16 pixel icon is the smallest and appears in Chrome's toolbar when your extension is active. This is what users see next to the address bar. At this size, fine detail disappears — you cannot fit text, small shapes, or complex graphics. Think of it as a favicon: simple, bold, and instantly recognizable even when tiny.

Design your 16-pixel icon with solid shapes and high contrast. A single letter, a simple geometric shape, or a recognizable symbol works well. Avoid thin lines, small text, or gradients that fade to near-invisible at this scale. Test it at actual size on your screen — open an image editor and zoom to 100 percent so you see exactly what users will see.

The 48-pixel icon: the extension management page

The 48×48 pixel icon appears on Chrome's extension management page, which users reach by typing chrome://extensions into the address bar. This is where Chrome lists all installed extensions with a small preview of each one. At 48 pixels, you have more room than the toolbar icon, but it is still small enough that fine detail gets lost.

Your 48-pixel icon should be recognizable and match the style of your 16-pixel version, but you can add slightly more detail. A small logo with a letter or number works here. Again, test at actual size — do not rely on how it looks when you zoom in during design. The goal is for users to instantly spot your extension in a list of dozens.

The 128-pixel icon: the Chrome Web Store

The 128×128 pixel icon is the largest and is what appears on the Chrome Web Store when someone is browsing for extensions to install. This is your marketing image — it is the first thing a potential user sees, and it needs to look polished and professional. At 128 pixels, you can include more detail, gradients, shading, and even small text if it is legible.

Your 128-pixel icon should be visually appealing and clearly communicate what your extension does. If your extension blocks ads, show a blocked symbol. If it manages passwords, show a lock or key. This icon is often the deciding factor for whether someone installs your extension, so invest time in making it look good. You can use gradients, shadows, and more complex shapes here without worrying about them disappearing at smaller sizes.

How to specify icon sizes in your manifest file

Your extension's manifest.json file is a text configuration file that tells Chrome everything about your extension — its name, what it does, what permissions it needs, and where its icons are. You list your three icon files in the "icons" section. Here is what that looks like:

"icons": { "16": "images/icon-16.png", "48": "images/icon-48.png", "128": "images/icon-128.png" }

The number on the left (16, 48, 128) tells Chrome the size of that image file. The text on the right is the file path — where Chrome should find that image inside your extension folder. If you name your files something different or store them in a different folder, change the path to match. Chrome will not find the icons if the paths are wrong, and your extension will show a blank or broken icon instead.

File format and transparency

Chrome accepts PNG and JPEG formats for extension icons. PNG is the better choice because it supports transparency — you can make the background see-through so your icon blends with any background color in Chrome. JPEG does not support transparency and will show a solid background color instead, which can look awkward if Chrome's interface changes or if the user has a dark theme enabled.

If you use PNG, keep your file size reasonable. A 128-pixel PNG should be under 50 kilobytes. Compress your images before uploading to the Chrome Web Store — large icon files slow down the store and annoy users downloading your extension. Most image editors have an "export for web" or "optimize" option that reduces file size without visible quality loss.

Common mistakes when creating extension icons

The most common mistake is uploading only one icon size and letting Chrome scale it. This always looks bad. The second mistake is making the 16-pixel icon too detailed — users cannot see it, and it becomes a blurry smudge. The third is forgetting to update the manifest.json file with the correct file paths, which leaves your extension with no icon at all.

Another frequent problem is using JPEG instead of PNG and ending up with a solid background that clashes with Chrome's interface. If your extension icon has a white background and Chrome switches to dark mode, your icon will look like a white rectangle with nothing on it. PNG with transparency solves this — your icon adapts to whatever background Chrome uses.

Frequently Asked Questions

Can I use the same image file for all three sizes?

Technically yes, but it will look bad. Chrome will scale a single image up or down to fit each size, and scaling always reduces quality. A small image blown up looks pixelated. A large image shrunk down loses detail. Three separate images, each drawn at the correct size, always look better.

What if I only have one icon size right now?

Start with the size you have and create the other two. If you have a 128-pixel version, you can scale it down to 48 and 16 pixels as a starting point, then redraw the smaller versions by hand to add back the detail that scaling removes. This is faster than starting from scratch.

Do I need to include the icon in my extension upload to the Chrome Web Store?

Yes. The 128-pixel icon is required for the store listing. The 16 and 48 pixel versions are required for Chrome itself to display your extension correctly in the toolbar and extension management page. All three must be present and correctly specified in your manifest.json file.

What happens if my icon files are the wrong size?

Chrome will still display them, but they will be scaled, which makes them look blurry or pixelated. Users will notice immediately, especially if your extension is competing with others on the Chrome Web Store. Always use the exact sizes Chrome expects.

Can I use SVG format for extension icons?

Chrome does not support SVG for extension icons. You must use PNG or JPEG. SVG would be ideal because it scales perfectly to any size, but Chrome's extension system does not include this option. Stick with PNG for the best results.