README Badge Generator
Build shields.io README badges with a live preview, then copy the Markdown, HTML, reStructuredText or AsciiDoc.
Preview is drawn locally as inline SVG. Widths closely approximate shields.io, and simple-icons logo artwork is not drawn here.
How it works
Type the two halves of the badge and the shields.io URL is assembled live, following the
static badge path format documented by shields.io:
https://img.shields.io/badge/<label>-<message>-<colour>. That path
has three escaping rules, and getting them wrong is the usual reason a badge renders as
gibberish: a literal dash is doubled to --, a literal underscore is doubled to
__, and a space is written as a single _. Everything else is
percent-encoded. So code style becomes code_style and a-b
becomes a--b. Leaving the label empty produces the label-less form
/badge/-message-colour. Style, logo and label colour are appended as query
parameters, for example ?style=for-the-badge&logo=github&labelColor=555.
The preview is not fetched from shields.io. Nothing on this page makes a network request: the badge you see is inline SVG that this page draws itself, using the same layout shields uses for its flat, flat-square, plastic and for-the-badge styles, including the rule that flips the text to dark grey once the background is light. Text width is measured in your browser, so it can differ from the server-rendered badge by a pixel or two, and simple-icons logo artwork is not bundled here, so a logo appears in the URL but not in the preview. Copy the Markdown, HTML, reStructuredText or AsciiDoc snippet for your README, or download the SVG and commit it if you would rather not depend on shields.io at all.
Frequently asked questions
How do I add a badge to my GitHub README?
Set the left text, the right text and a colour, pick a style, then copy the Markdown snippet and paste it near the top of your README.md. GitHub renders the shields.io image inline. If you want the badge to be clickable, put your CI or release page in the link field and the snippet becomes a linked image. The same badge is also offered as HTML, reStructuredText and AsciiDoc for docs that are not Markdown.
Why does my hand-written shields.io badge URL come out wrong?
Because the static badge path has three escaping rules that are easy to miss. A literal dash must be doubled to --, a literal underscore doubled to __, and a space is written as a single _; everything else is percent-encoded. So "code style" becomes code_style and "a-b" becomes a--b. This page applies those rules for you as you type, so the URL it shows is the one shields.io will actually resolve.
Does this tool contact shields.io to draw the preview?
No. The badge you see is inline SVG this page draws itself, using the same geometry as the flat, flat-square, plastic and for-the-badge styles, including the rule that flips the text from white to dark grey once the background is light. Nothing is fetched and nothing you type leaves your browser, so it works offline and never reveals a private project name. You can even download the SVG and commit it instead of linking to shields.io.