Generate a Shields.io badge

Build a Shields.io Markdown badge for package, repository, build, coverage, or license status.

freeworks offlinenothing uploaded
ToolBadge Generator
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The selected label, message, colour, style, and link are URL-encoded into a Shields.io image link. Presets use known endpoint paths while custom values form a generic badge URL.

  • Flat style and a green message are readable starting values.
  • URL encoding protects spaces and punctuation in badge text.

Worked example

Generate an npm version badge
Create a shields.io badge for an npm package
Input
											npm
Output
												[![npm](https://img.shields.io/npm/v/package?style=flat)](https://www.npmjs.com/package/package)

When to use this

README status lines show npm versions, GitHub builds, coverage, downloads, and licenses.

Edge cases

  • A slash or ampersand in a message must be encoded.
  • An unsupported service colour can make the image fail even when Markdown is valid.
  • The image target and click-through link are separate values.

References