Badge Maker - Create README and Award Badges

How to use this tool

1. Choose README badge for a two-part status label or Award badge for a decorative design.
2. Enter text, choose colors and a style or shape, and check the live preview.
3. Download SVG or PNG, or copy SVG, Markdown, HTML, or a share link.
4. For a README image, commit the downloaded SVG and update the copied relative file path.

Two kinds of badges

Use README badge mode for the compact, two-part labels commonly placed near the top of a project README. Set a label such as “build” and a message such as “passing,” then choose the segment colors and visual style. The tool draws a static SVG locally in your browser. Presets fill in common examples for build status, license, npm version, coverage, and contribution notices; edit any field afterward to make the text your own.

A generated README badge is an image snapshot. It does not check a build, query a package registry, or update itself when a project changes. For a live status value, a hosted provider such as Shields.io can read a supported service and serve an updated image, but that adds an external service dependency. This maker instead exports a file you can commit with your project. Download the SVG, save it under a path such as badges/build.svg, and update the copied Markdown or HTML snippet to point to that file.

Exporting and embedding

SVG is a vector format, so text and edges stay crisp when the badge is resized. PNG is a raster image that works in image editors and other places that expect pixels; choose 2× when you want a denser export for high-resolution displays. Copy SVG copies the actual graphic markup, while Copy Markdown and Copy HTML provide an image reference to ./badge.svg. Copy SVG data URL is available for destinations that allow inline images, but some Markdown hosts block data URLs. After downloading, change the relative file path if you store the SVG elsewhere. The committed-image snippets keep README source readable and avoid relying on an external badge host.

Award badge mode is for decorative labels, event graphics, name tags, and simple stickers. It keeps the rounded rectangle, rectangle, circle, and shield shapes, with an optional emoji and adjustable dimensions. Both modes export SVG and PNG, but only README mode has separate label and message panels with README-oriented style presets. Long award text is condensed to fit the chosen width; check the preview before using very small sizes or unusual emoji, since font and emoji appearance can vary across systems.

Color and readability

Common status colors offer a quick visual convention, but color alone should not carry the meaning: keep a clear message such as “passing” or “failing” in the badge. The contrast notice compares the text color with each badge segment using the WCAG relative-luminance ratio. For normal-sized text, a ratio of 4.5:1 is the usual AA target; large bold text uses 3:1. Small README badges can be difficult to read even when they technically pass, so inspect the badge at the size where it will appear and choose a concise label.