How to Resize, Compress, Package, and Preview a VS Code Extension Icon Before Publishing

A publishing workflow for extension authors who want the icon file, manifest path, VSIX package, banner color, README images, and badges to agree before release.

Before publishing a VS Code extension icon, prepare an original PNG, size it to at least 128x128 pixels, keep a 256x256 export for sharper screens, reference it in package.json, confirm it is included in the VSIX, and preview it beside the Marketplace banner color.

Official source note: VS Code publishing guidance describes vsce for packaging and publishing, while the manifest reference defines the icon path and Marketplace presentation fields. See VS Code publishing extensions guidance and the VS Code extension manifest reference.

Package copy: When the icon is rights-safe, readable, and correctly referenced, use ConvertiImage image compressor to create the final PNG delivery copy before the VSIX check.

Prepare the source before resizing

Start with artwork you own or have permission to use. A linter, formatter, theme, debugger, notebook helper, snippet pack, or extension pack can use a simple original mark without borrowing official logos. Keep a source file separate from the packaged PNG so you can revise the icon later without recompressing a compressed copy.

Design the symbol for a small square first. If the icon only makes sense at 800 pixels wide, it is too complex for a Marketplace card. Prefer a clear shape, strong foreground-background contrast, and generous internal spacing. Avoid labels unless the label is short enough to remain readable at icon size.

Workflow step	Action	Mistake to avoid	Final check
Confirm rights	Use original or licensed artwork	Copying VS Code, Microsoft, GitHub, npm, or competitor logos	The icon does not imply endorsement or impersonation
Resize icon	Export PNG at 128x128 or larger, with 256x256 available	Starting from a small raster file and enlarging it	Edges stay sharp on light and dark backgrounds
Compress delivery copy	Reduce file weight after the final export	Compressing until transparency, strokes, or contrast break	The icon still reads in a small Marketplace card
Reference manifest	Set icon to the correct relative PNG path	Pointing to a local design source or excluded folder	The file path resolves inside the project
Package and inspect	Build the VSIX and check included files	Ignoring validation warnings	The icon, README images, license, and changelog are present
Preview listing	Review icon, banner color, badges, screenshots, and description together	Using visuals that overpromise extension behavior	The listing matches the extension users will install

Compress only after the icon is correct

Compression is the final cleanup step, not the fix for bad artwork. Compare the compressed PNG against the original at small size. Look for rough transparent edges, washed-out gradients, broken antialiasing, unreadable initials, and shadows that disappear on dark backgrounds. If those details fail, export again with a simpler design or a lighter compression setting.

Package the icon and listing visuals together

Run the package step and check the generated VSIX contents before publishing. The icon file should exist at the manifest path. README and changelog images should resolve correctly. Badges should use real sources. Screenshots should show the extension's actual interface or output and should not expose API keys, tokens, customer data, private repositories, emails, or internal systems.

Use the Marketplace preview as a trust test. The icon, galleryBanner.color, display name, description, repository, license, changelog, support information, badges, and screenshots should all describe the same extension. If one visual makes the extension look more official, more secure, or more powerful than it is, replace it before publishing.

Brand source note: VS Code brand guidance warns against modified VS Code icons and naming that implies endorsement. Microsoft trademark guidance also restricts use of Microsoft brand assets as app icons without permission. See VS Code brand usage guidance and Microsoft trademark and brand guidelines.

Cross-check: Return to the VS Code Marketplace icon hub guide, troubleshoot failures in why VS Code extension icons look blurry or missing, or verify rules in the icon size, PNG, path, banner, and badge guide.

FAQs About Publishing a VS Code Icon

Check rights, PNG format, 128x128 minimum size, 256x256 Retina export, manifest path, VSIX contents, banner contrast, and README image links.

Package the extension, inspect the generated VSIX contents, and confirm the PNG exists at the same relative path used in package.json.

Preview the small icon, listing header banner, README images, badges, screenshots, display name, and description as one Marketplace presentation.