RunLocalTools

README Badge Generator — Free Shields.io Badge Maker

Build build, license, version, and tech-stack badges for your README with a live preview. Export as Markdown, HTML, reST, or AsciiDoc — free, no sign-up.

What it does

This tool builds the little status badges you see at the top of GitHub READMEs — build passing, license, version, language, and more — using the shields.io badge service. Fill in a label and message, preview the badge instantly, and add it to a “kit” of badges you can reorder and export together as Markdown, HTML, reStructuredText, or AsciiDoc.

How it works

Every badge is a shields.io image URL built from three pieces: a label, a message, and a color, plus optional style and logo parameters. The generator handles the fiddly parts of that URL for you — literal hyphens and underscores in your label or message have to be escaped for shields.io’s syntax, and this tool does that automatically so 100% coverage or C++ / Node come out correctly every time instead of breaking the badge image. Presets fill in a sensible starter set for common project types, and the license quick-picks cover the SPDX identifiers people actually use (MIT, Apache-2.0, GPL-3.0, and others).

How to use it

  1. Pick a preset (Node.js project, Python project, etc.) to add a starter set of badges, or build your own with the label, message, color, and style fields.
  2. Watch the live preview update as you type — that’s the real badge image, not a mock-up.
  3. Click Add to kit to save it to your badge collection.
  4. Reorder badges with the arrow buttons, or remove any you don’t need.
  5. Pick your output format (Markdown, HTML, reST, or AsciiDoc) and copy the whole block into your README.

FAQ

Can I use a custom hex color instead of a named color? Yes — type a hex code with or without the leading # into the color field (for example 2f6fed), or use any of the named colors shields.io supports, like brightgreen or blueviolet.

Why does my badge look broken when my label has a hyphen in it? Shields.io’s URL syntax treats a bare hyphen as a separator between label, message, and color, so a literal hyphen in your text needs to be doubled. This tool escapes that automatically — if you’re building the URL by hand elsewhere, that’s the detail that usually trips people up.

Can I add a logo, like the npm or Python icon? Yes — type a simple-icons slug into the logo field, such as npm, python, or github. Most well-known languages, frameworks, and platforms are supported.

Does this save my badge kit for next time? Your kit and output format are remembered in this browser between visits, so you can come back and keep editing the same set without rebuilding it.

What’s the difference between the output formats? Markdown is what most READMEs use. HTML gives you an <img> tag for platforms that don’t render Markdown images directly. reStructuredText and AsciiDoc are for Python and Java-ecosystem docs respectively, where those markup languages are more common than Markdown.

Once your badges are in place, you might also want a Markdown editor with live preview to see exactly how the finished README will render, or a .gitignore generator if you’re setting up the rest of a new repo.