You need to supply several kinds of images to be used in the Chrome Web Store:
Only the extension icon, a small promotional image, and a screenshot are mandatory. However, providing attractive versions of both required and optional images increases your extension's chances of getting noticed. For example, your extension can't be featured in marquee unless you provide a marquee promotional image.
You can improve your item's performance in the Chrome Web Store by following our best practices for images and other listing information. To learn more about these best practices, see Creating a compelling listing page.
Extension icon
You must provide a 128x128-pixel extension icon image in the ZIP file of your extension. Some requirements for the image:
- The actual icon size should be 96x96 (for square icons); an additional 16 pixels per side should be transparent padding, adding up to 128x128 total image size. For details, see Icon size.
- The image must be in PNG format.
- The image should work well on both light and dark backgrounds.
When you design the icon, keep the following advice in mind:
- Don't put an edge around the 128x128 image; the UI might add edges.
- If your icon is mostly dark, consider adding a subtle white outer glow so it'll look good against dark backgrounds.
- Avoid large drop shadows; the UI might add shadows. It's OK to use small shadows for contrast.
- If you have a bevel at the bottom of your icon, we recommend 4 pixels of depth.
- Make the icon face the viewer, rather than having built-in perspective. See Perspective for details.
Here are some icons that follow these guidelines.
|
|
|
Icon size
All extension icons should have the same visual weight, occupying roughly the same area. As the following figure shows, when you size an icon to fill the available area, square and circular icons are significantly larger than they should be, compared to icons with other shapes.
Normalizing the icon sizes, as the next figure shows, gives the icons roughly even area and visual weight.
You can use the following template images to help you judge how large your image's artwork should be. The templates show the correct size for a square and a circle, but these are merely guides; icons that have pointy bits might stray outside these areas. If an irregularly shaped icon takes up very little area and is mostly negative space, using the entire 128x128 area might be acceptable.
|
|
|
You can follow some rules of thumb for artwork size. For a square icon, make the artwork 96x96 pixels. For other icons that are squarish, make the artwork's width 75-80% of the total width of the image. A circular icon should have a diameter of approximately 112 pixels, or 85% to 90% of the image width. Icons with irregular shapes should have similar weights.
The following figures show square and circular icons, comparing them with the templates.
|
|
|
|
|
|
Here's an example of an irregularly shaped icon. In this case, the icon follows neither the square nor circular guidelines, but it fits near them both.
|
|
|
Perspective
For flexibility and consistency, extension icons should be front-facing. Subtle tweaks of perspective that give a sense of tangibility are OK, but avoid dramatic angles.
| Good icons (front-facing) | Bad icons (too-drastic perspective) |
|---|---|
|
|
|
|
Promotional images
You must provide one small, 440x280-pixel promotional image. You can also provide other images that the store can use to promote your extension.
Note: If your images refer to Google brands, follow the Branding Guidelines.
Although only a small promotional image is required, you can also supply larger promotional images if you'd like your extension to be featured more prominently in the Chrome Web Store. You can provide one of each of the following:
- Small: 440x280 pixels (required)
- Marquee: 1400x560 pixels
Promotional images are your chance to capture users' attention and entice them to learn more. Don't just use a screenshot; your images should primarily communicate the brand. Here are some rules of thumb for designing your images:
- Avoid text.
- Make sure your image works even when shrunk to half size.
- Assume the image will be on a light gray background.
- Use saturated colors if possible; they tend to work well.
- Avoid using a lot of white and light gray.
- Fill the entire region.
- Make sure the edges are well defined.
The following graphics are examples of the promotional images for an extension:
Here is a description of the review statuses:
- Pending Review status: The image has not yet been reviewed, and is not being displayed in the store. Images should be reviewed within one week from submission.
- No status: The image has been approved, and is being displayed in the store. [*Images from 'Draft' or 'Trusted testers' items will not show an image status. You will need to publish the item in order to get your promo image approved.]
- Rejected: The image has been reviewed and rejected, and is not being displayed in the store. The reason(s) for rejection will be displayed in the Promotional Images section of the item's Edit page. We encourage you to review the reasons, and to make the necessary changes before re-uploading new improved images. New uploaded images will immediately have a Pending Review status.
To replace a promotional image, hover over the image to bring up the remove image control.
Screenshots
Use screenshots to convey capabilities, the look and feel, and experience of your extension to users. You must provide at least 1—and preferably the maximum allowed 5—screenshots of your extension to be displayed in the extension's store listing. Screenshots should demonstrate the actual user experience, focusing on the core features and content so users can anticipate what the extension's experience will be like.
If your extension supports multiple locales, you can provide locale-specific screenshots as described in Localize your store listing.
When you edit your extensions's listing, mousing over a screenshot's thumbnail brings up controls that let you delete the screenshot or change its position.
Each screenshot should be as follows:
- Square corners, no padding (full bleed)
- 1280x800 or 640x400 pixels
As an example, here are two screenshot images for an extension:
What next?
Next, read Submit your extension for publishing.