README Badge Builder

Visually build shields.io badges for your README. Pick from common types (npm version, GitHub stars, license, downloads, build status) or build a custom badge. Copy the Markdown ready to paste.

Preview

Badge preview

How to use the README Badge Builder

Pick a badge type. The form changes to ask for the right fields (npm package name, GitHub repo, license name). The shields.io URL builds live; the preview shows the actual rendered badge. Copy Markdown for README files, HTML for blog posts.

Status badges for your README

The small colored badges at the top of a README — build passing, npm v2.1.0, MIT license, 1.2k stars — are images served by shields.io. Each is an SVG generated from a URL that encodes the label, value, and color; many types also query a live source, so a version or download-count badge updates itself as the underlying data changes.

Writing those URLs by hand means remembering the path format for each badge type. This builder gives you a form per type — npm version, downloads, GitHub stars, open issues, license, build status, or a fully custom label/value/color — builds the shields.io URL live, previews the actual badge, and hands you the Markdown and HTML ready to paste.

Common use cases

  • npm package READMEs — show the current published version and download count.
  • GitHub repo status — display star count and open-issue count at a glance.
  • License visibility — add a badge stating the project's license up front.
  • Build status — surface a GitHub Actions passing or failing badge.
  • Custom badges — build any label/value/color pair for project-specific info.

Frequently asked questions

What is shields.io?
A service that generates badge images from a URL. You encode the label, value, color, and style in the path, and it returns an SVG; many badge types also pull live data from npm, GitHub, and other sources.

Which badge types can I build?
npm version and downloads, GitHub stars and open issues, license, GitHub Actions build status, and a fully custom badge where you set the label, value, and color yourself.

Do the badges update on their own?
The data-driven ones do. A version or star-count badge queries its source each time it loads, so it reflects the current value without you editing the README.

Do I get Markdown or HTML?
Both. Copy the Markdown for a README or the HTML for a blog post or page — the builder outputs each from the same badge.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: