Shields Badge Generator
Build shields.io badge URLs, Markdown and HTML.
How to use
- 1 Enter the badge label and message text.
- 2 Choose a colour by name (e.g. brightgreen) or hex value.
- 3 Pick a style and, optionally, a logo slug and link.
- 4 Copy the URL, Markdown or HTML snippet into your project.
About Shields Badge Generator
The Shields Badge Generator builds the little status badges you see across READMEs and project pages — "build: passing", "version: 1.0.0", "license: MIT" — using the shields.io static badge service.
You type a label, a message and a colour, choose a style, and the tool assembles the correct image URL plus copy-ready Markdown and HTML snippets so you can paste a badge straight into a README, a docs page or an HTML file.
Getting the URL right by hand is fiddly because shields.io has specific escaping rules: literal dashes and underscores in your text must be doubled, spaces become underscores, and the whole thing has to be percent-encoded.
This tool handles all of that for you, so a message like "black-formatted" or a label with spaces comes out exactly right.
You can also pick from the standard styles — flat, flat-square, plastic, for-the-badge and social — add a Simple Icons logo slug such as "github" or "npm", and wrap the badge in a clickable link.
The generator is purely a URL builder: it constructs the link locally in your browser and never fetches anything, so nothing you type is uploaded or stored.
The image itself is served by shields.io when the badge is rendered in your README.
FAQ
Why are dashes and underscores doubled in the URL?
Shields.io uses dashes and underscores as separators, so a literal dash must be written as -- and a literal underscore as __. The tool applies this escaping automatically so your text renders correctly.
Does the tool contact shields.io?
No. It only builds the URL and snippets locally in your browser. The badge image is fetched from shields.io later, when the badge is displayed wherever you paste it.
What colours can I use?
Any shields.io named colour such as brightgreen, blue or red, or a 3- or 6-digit hex value (with or without a leading hash), for example 4c1 or #007ec6.