Designing Tile Images for Chrome Web Store

Tile images are the billboards of the Chrome Web Store. When your extension appears in curated collections, featured sections, or category pages, the tile image is the single largest visual element users see. A compelling tile can double your click-through rate compared to the default (which is just your extension icon on a gray background). A poorly designed tile — blurry, text-heavy, or off-spec — signals "amateur" before the user reads a word.

Yet most extension developers treat tiles as an afterthought. They slap their logo on a gradient, add their extension name in a large font, and call it done. This guide covers the design principles that make tiles convert, the exact specifications for each size, and the rejection reasons to avoid.

Design Process#

Tile Sizes and Requirements#

Each tile type has exact pixel requirements. The Chrome Web Store rejects uploads that do not match.

The most important detail: tiles are frequently displayed at half their actual pixel dimensions. Every visual element must be legible at 50% scale. Text below 24px (at actual tile size) becomes unreadable in thumbnails. Icons below 64px become unidentifiable blobs.

Design Principles by Tile Type#

Small Tile (440 x 280)#

The small tile appears in the most competitive context — search results and category listings, where it sits alongside 10-20 other extensions. At its displayed size (~220px wide), you have about 2 seconds of attention.

Design rules for small tiles: one large icon or illustration that fills at least 40% of the tile area. Extension name in a bold, sans-serif font at 28-36px minimum. No more than 5 words of text total. High-contrast background that pops against the white store page. No screenshots — they are unreadable at this size.

Large Tile (920 x 680)#

The large tile appears in curated collections where your extension has more breathing room and less direct competition. You can include more information here.

Design rules for large tiles: your icon plus a simplified UI mockup or feature illustration. A tagline of 6-10 words that communicates your core benefit. Optional: a small badge or stat ("100K+ users" or "4.8 ★ rated"). The extra space tempts you to add more — resist it. White space is a feature.

Marquee Banner (1400 x 560)#

Marquee tiles are by invitation only — Google selects extensions for featured placement. But having the asset ready means you can be featured on short notice when the opportunity arises.

Design rules for marquee banners: cinematic, wide composition. The extreme aspect ratio (5:2) means vertical elements get cropped or feel cramped. Use horizontal layouts with the icon on one side and text on the other. Background illustrations or abstract patterns work well to fill the width without feeling empty.

Design Tool Workflows#

Common Rejection Reasons#

The Chrome Web Store review team rejects tile images for specific, avoidable reasons.

Exact dimension mismatch: 439x280 instead of 440x280 gets rejected. Always verify pixel dimensions before uploading — some image editors round oddly during export.

Text outside the safe zone: text within 15% of any edge risks being clipped by the store's display container. Keep all text in the center 70% of the tile.

Misleading content: a tile showing features or UI that your extension does not actually have. The review team compares tiles to actual extension functionality.

Excessive text: tiles that look like advertisements with bullet points, feature lists, and multiple CTAs. The store favors visual tiles with minimal text.

Low resolution or compression artifacts: JPEG artifacts around text edges, pixelated icons, or blurry screenshots. Always export at maximum quality.

Brand guideline violations: using Chrome's logo, Google's branding, or the Chrome Web Store badge in your tile without following their brand guidelines. You can reference Chrome compatibility, but you cannot use official logos.

“The best Chrome Web Store tiles tell a story in two seconds. You should be able to glance at a tile, understand what the extension does, and feel something — curiosity, trust, or excitement. If your tile requires reading, it has already failed.”

Engagement by Tile Quality#

Extensions with professionally designed tiles consistently outperform those with default or amateur tiles across every metric.

The install conversion lift deserves explanation. The tile does not just get users to your listing — it sets expectations. A polished tile makes users expect a polished extension, which makes them more likely to trust the install button. A poor tile creates skepticism that your extension description then has to overcome.

Gradient Backgrounds That Work#

Gradients are the most popular tile background style because they are easy to create, always look clean, and do not require illustration skills. But not all gradients perform equally.

Two-color linear gradients from top-left to bottom-right work best. Choose colors that are adjacent on the color wheel (analogous colors) for harmony, or complementary colors for energy. Avoid gradients that are too subtle (looks like a solid color) or too dramatic (creates a dated 2010s aesthetic).

Radial gradients centered behind your icon create a natural focal point. The gradient draws the eye to the center where your icon sits. Use a lighter center color to create a "spotlight" effect.

Mesh gradients (multiple color points blended together) are trending and distinctive but require tools like Figma or specialized generators to create without looking chaotic. When done well, they make tiles stand out dramatically from the standard linear gradient competition.

/* CSS representations of effective tile gradients */
 
/* Analogous warm */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
/* Analogous cool */
background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);
 
/* Radial spotlight */
background: radial-gradient(circle at 50% 40%, #e0c3fc 0%, #8ec5fc 100%);
 
/* Bold complementary */
background: linear-gradient(135deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 100%);

Your tile images are among the highest-leverage assets you create for your extension. Investing a few hours in design pays back in thousands of additional clicks and installs over the lifetime of your listing. For more on visual assets, see designing extension icons from scratch and creating promotional images. For the full store listing optimization picture, read the Chrome Web Store SEO guide.