README Badge Generator
Generate shields.io badge Markdown or HTML online, covering custom text badges, license badges, version badges (including live npm lookups) and build status badges, with a live preview.
FreeOnline Tool
Loading…
How to Use
- Pick the badge type tab: custom badge, license badge, version badge or build status badge
- Fill in the relevant fields - a custom badge needs a label, a message and a color, while a version badge can either show a static version you type in or query the latest version of an npm package by name
- Enter the alt text and an optional link target; the badge image previews live below
- Press "Copy" to grab the Markdown or HTML and paste it into your README.md or web page
Features
- Custom text badges built on the shields.io three-part pattern https://img.shields.io/badge/{label}-{message}-{color}, with automatic escaping of "-", "_" and spaces
- License badges with common open source licenses built in: MIT, Apache-2.0, GPL-3.0, BSD-3-Clause, ISC, MPL-2.0, LGPL-3.0, AGPL-3.0 and Unlicense
- Version badges in two modes - a static badge from a version number you type, or a live npm badge using https://img.shields.io/npm/v/{package} to read the latest version from the npm registry
- Build status badges are static placeholders for passing/failing/unknown only; they never connect to a CI system to look up a real build state
- Live preview rendered from the generated shields.io image URL, the one external image reference this tool allows. If the preview fails to load, for example because of network conditions, a clear notice appears - the generated Markdown/HTML is unaffected and remains ready to copy
- One-click copy of the Markdown form () or the HTML form (<img src="url">), optionally wrapped in a link
Use Cases
Adding a license badge to a GitHub README
Pick your project's open source license and generate the Markdown for a license badge to paste at the top of README.md
Showing a live npm package version
Enter your npm package name to get a badge that reads the latest version from the npm registry, so you never edit the badge text on release
Making custom status labels
Use the custom badge form to produce any text and color combination, such as "maintained" or "stable", for docs or a personal homepage
Placeholder build status
When a project has no CI yet, or you would rather not expose the real build state, generate a static passing or failing placeholder badge
FAQ
Where is the preview image loaded from?
The preview points straight at the official shields.io image service, which is the whole point of a badge tool - seeing what the badge looks like. It is not an external JavaScript library. Generating the Markdown/HTML happens entirely locally, so even if the preview image fails to load you can still copy and use the code.
Is the npm version badge really live?
Yes. In "live npm version" mode the generated URL is shields.io's dynamic endpoint (img.shields.io/npm/v/{package}), and shields.io queries the npm registry when rendering the image. When you publish a new version the badge updates itself with no code change needed.
Can the build status badge detect my real CI result?
No. The build status badge only offers static passing/failing/unknown placeholders that you select by hand; it never connects to a CI system. For a real build status badge, use the dynamic badge your CI platform provides, such as GitHub Actions or Travis CI.
What colors can a custom badge use?
Any preset shields.io color name (brightgreen, blue, red, lightgrey and so on) or a hexadecimal color value, with or without the leading # - the tool strips the # automatically.