Icons and Branding — The Four PNGs That Actually Matter

"Chrome shows your icon in five places at four sizes, and a single 128 PNG scaled to 16 looks like static. Lesson 1 is producing the right four PNGs, then the side notes — disabled-state grayscale, dark-mode considerations, Web Store badge variants."

The Four Sizes Chrome Asks For

• 16 — toolbar favicon next to chrome://extensions URLs, and the URL bar when relevant.
• 32 — Windows scaling and some platform-specific surfaces.
• 48 — the extension management page (chrome://extensions card).
• 128 — Chrome Web Store listing, install prompt, sometimes used on the New Tab page.

Provide all four as separate PNGs. Chrome can scale a single image but the result is visibly worse than pixel-tuned variants — especially the 16, where antialiased detail from a 128 turns into mush.

Designing for the Sizes

The 16 is the hardest. Less than 250 pixels total, often shown next to dark UI chrome. Practical constraints:

• One strong silhouette. Multi-element logos disappear at 16; pick the single most recognizable shape.
• High contrast against both white and dark backgrounds. Chrome's UI flips depending on dark mode.
• Avoid thin strokes. A 1-pixel line at 16 anti-aliases into a gray smear; 2-pixel minimum.
• Test in actual context. Open chrome://extensions on a Mac with dark mode; if your icon hides into the page, you need a stronger silhouette.

The 128 has the most room but is also the most public — the Web Store screenshot shows it at full size. Treat it as your hero asset; the smaller sizes derive from it.

The Manifest Declaration

Two places to list icons:

• icons (top-level) — used by chrome://extensions and the Web Store. Object keyed by size.
• action.default_icon — used in the toolbar. Usually mirrors the top-level icons.

You can declare both with the same paths; Chrome reads them as separate fields but you don't need two sets of files.

Disabled State

When you call chrome.action.disable(tabId), Chrome greys out your icon automatically — no separate disabled asset needed. The default greyscale conversion works for most icons. If yours has elements that disappear in greyscale (low-contrast colors), provide a manual setIcon with a hand-tuned grey variant.

Dark Mode

Chrome doesn't auto-flip your icon for dark mode. If your icon is dark-on-transparent, it's invisible against Chrome's dark toolbar. Two options:

• Outline approach — keep the icon mostly stroke-based with no solid fills. Works on both backgrounds.
• Programmatic swap — listen for matchMedia('(prefers-color-scheme: dark)') in the SW, call chrome.action.setIcon with a light variant when needed. More work; rarely worth it for v1.

ClipDeck v1 uses the outline approach for the 16 — paperclip outline, brand color stroke, no fill. Reads cleanly on both light and dark Chrome.

The Web Store Asset Pack

The Chrome Web Store needs more than the extension icons — store-only assets you upload separately:

• 128 × 128 store icon — same as the manifest icon at 128.
• 440 × 280 small promo tile — appears in store search results.
• 1400 × 560 marquee promo — featured-extension surfaces (rare for indie extensions; design it anyway).
• Screenshots — 1280 × 800 or 640 × 400. At least one; up to five. These are the most-viewed asset; treat them as marketing.

Have the screenshot set ready before submission. Web Store reviewers count screenshot quality toward 'is this real software,' and bare manifest-only listings get rejected for not communicating what the extension does.