README Badge Generator

Generate shields.io-compatible badges for GitHub READMEs — pick style, color, and copy Markdown.

Label (left)

Message (right)

Color (hex or name)

Style

Logo (optional, e.g. "github", "npm")

Presets

How shields.io badges work

Shields.io generates SVG badge images from a URL pattern: https://img.shields.io/badge/<left>-<right>-<color>. Hyphens in the text are escaped as double-hyphens (--), underscores as double-underscores (__), and spaces as underscores. Colors can be named (brightgreen, blue, red, yellow, orange, lightgrey) or hex codes without the #.

For Markdown help, try the Markdown Converter.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Adding build, version or licence badges to a project README.
Producing a consistent badge style across a set of repositories.
Getting the Markdown for a badge without hand-writing the URL.
Creating a custom badge for something no service provides.
Replacing a broken badge whose URL format changed.

Frequently Asked Questions

Why are hyphens doubled in the URL?: Because shields.io uses the hyphen as its field separator, so a literal one has to be escaped as --. By the same rule an underscore becomes __ and a space becomes _. "Build-Passing" must be written Build--Passing or the badge splits in the wrong place.
What do the styles change?: flat is the default rounded look, flat-square drops the rounding, plastic restores the old gradient, for-the-badge renders large uppercase text with wide padding, and social mimics GitHub's own button style. They are cosmetic only.
Where do the logos come from?: The logo parameter accepts any Simple Icons slug — github, npm, docker, typescript — and shields.io fetches the SVG for you. Slugs are lowercase with no spaces; a name that does not exist silently renders a badge with no icon.
Are these static or live badges?: Static: the text is whatever you type, so a coverage 98% badge stays at 98% until you edit it. Live badges use a different endpoint that queries your CI, npm or GitHub — useful, but they add a network dependency to every README view.
Why does the badge not render on GitHub?: GitHub proxies all README images through Camo, which caches aggressively — an updated badge can show the old value for a while. Camo also requires HTTPS, and it will not fetch an image from a host that fails TLS validation.
Does a badge slow the README down?: Slightly — each is an external image request, and a service that is slow or down leaves a broken image in your README. That is the practical argument for keeping the row short rather than collecting them.

Common errors and gotchas

Adding so many badges that the README opens with a wall of colour rather than a description.
Using a badge that reports nothing real, such as a hard-coded coverage figure.
Depending on a third-party badge service that may rate-limit or disappear.
Forgetting alt text, which leaves screen-reader users with a row of unlabelled images.
Leaving a badge pointing at a renamed repository, so it silently shows an error.