VS Code Extension Icon Size, PNG Format, package.json Path, Banner Color, Badges, and Marketplace Visuals

A decision guide for the exact files and listing elements that surround a Visual Studio Code Marketplace extension icon.

For a VS Code extension listing, the Marketplace icon should be a PNG file referenced by the icon field in package.json. Use at least 128x128 pixels, prepare 256x256 for Retina clarity, and treat README screenshots, badges, and banner color as separate Marketplace presentation assets.

Official source note: VS Code's extension manifest reference lists the icon path, galleryBanner.color, galleryBanner.theme, categories, keywords, display name, repository, bugs, and homepage fields used for Marketplace presentation. See the VS Code extension manifest reference.

Icon-size test: After you export the correct PNG and confirm the manifest path, use ConvertiImage image compressor to compare a lighter package copy against the original.

Choose PNG for the package icon

SVG may be useful while designing source artwork, but it is not the right final answer for the package icon when the VS Code publishing tool rejects SVG icons referenced by package.json. Export a PNG with clean antialiasing, readable contrast, and no unnecessary transparent padding. Then point the manifest to that file with a stable relative path.

A useful pattern is to keep source design files outside the publishing decision and commit only the image assets the package needs. For example, an extension can have a high-resolution source logo for design work, a 256x256 PNG package icon, README screenshots, and a banner color. Each file has a different role and should be checked separately.

Visual role	Size or export logic	Format logic	Manifest / Marketplace risk	Preview checklist
Marketplace package icon	At least 128x128 pixels; 256x256 for Retina clarity	PNG referenced in package.json	SVG icon rejected or PNG path broken	Small card, detail page, VSIX contents
Source logo artwork	Larger editable design file	SVG, vector, or layered source where you own the rights	Accidentally packaged as unsupported icon	Exported PNG matches source intent
README screenshot	Wide enough to show real UI without secrets	PNG or JPG; HTTPS remote images if hosted	Broken links or private data exposure	README render in Marketplace and repository
Badge	Small status label with clear meaning	Trusted provider where required	Unsupported SVG or fake status	Badge resolves and reflects real project state
Gallery banner	Hex color plus light or dark theme hint	Manifest color value, not an image	Icon disappears or feels off-brand	Icon contrast against final header color

Match the banner color to the icon

The galleryBanner.color value is not decorative filler. It changes the first impression of the detail page. A dark icon on a dark banner can disappear. A bright icon on a saturated banner can vibrate. Use a simple banner color that gives the icon enough contrast and still feels connected to the extension's purpose.

Theme extensions have a special risk: authors often choose a banner color from the theme palette even when the icon does not survive on that color. The Marketplace listing is a product page, not the editor theme itself. Pick the banner value that makes the listing readable.

Treat badges and README images as trust elements

VS Code publishing guidance applies extra security checks to README and changelog images. Remote images should resolve over HTTPS, and SVG badges have restrictions unless they come from trusted providers. That means a badge should be chosen for a real purpose: build status, version, license, downloads, or test status from a real service. Do not fake verification, security review, Microsoft endorsement, or download counts.

Publishing source note: The VS Code publishing guide says the package icon may not be SVG, README and changelog image URLs should resolve to HTTPS URLs, and SVG badges are restricted to trusted providers. See VS Code publishing extensions guidance.

Keep the listing consistent

The icon, display name, short description, categories, keywords, screenshots, repository link, license, changelog, and support information should all point to the same real extension. A notebook helper should not use a shield badge implying a security audit unless that audit exists. A formatter should not show screenshots from another extension. A theme pack should not copy another theme's logo or palette presentation.

Apply the rules: Follow the VS Code extension icon resize, compress, package, and publish workflow, or return to the complete VS Code Marketplace icon guide.

FAQs About VS Code Icon Format Rules

It gives the relative path to the image file the Marketplace uses as the extension icon.

It gives the Marketplace renderer more pixel detail than the 128x128 minimum when the icon is displayed on high-density screens.

It is a manifest color value used for the Marketplace listing banner, so it should contrast with the icon and support the extension brand.