⌘ K
shields.io · 5 styles · logo · href

Build a README badge

Visual builder for Shields.io badges — pick label, message, colour, style, optional logo and link. Copy ready-to-paste Markdown.

Markdown Badge Generator
Markdown
64 B
1 badge
Style
flat
no logo
Colour
brightgreen
default
Link
—
image only
input · fields
build
output · markdown
![build](https://img.shields.io/badge/build-passing-brightgreen)
Quick Start

How to build a Shields.io badge

Configure the label/message pair, pick a style and colour, paste the Markdown.

  1. 01

    Label and message

    The badge is two halves: a left label (typically a category like build, coverage, npm) and a right message (the value: passing, 98%, v1.4.0).

    Shields.io URL-encodes both with a twist: literal - becomes -- and _ becomes __. The encoder runs automatically as you type.

    Shields.iolabelmessageURL-encoded
    input · pairencoded
    build | passing
    14 B · 2 fieldsloaded
  2. 02

    Pick a colour

    Use named CSS-ish colours (brightgreen, blue, orange, red) or any hex (#ff0080). The optional label color tints the left half independently.

    Behind the scenes Shields.io renders an SVG badge — sharp at any zoom, accessible to screen readers via the alt text in the surrounding Markdown.

    named colourhexSVGlabelColor
    color · messageapplied
    message=brightgreen
labelColor=#222
    filledSVG-ready
  3. 03

    Style and logo

    Pick from five styles — flat (default), flat-square, plastic, for-the-badge (chunky uppercase), and social (GitHub-star-style).

    Drop a Simple Icons slug into the logo field (github, npm, jest, typescript) to render a recognisable mark next to the label.

    flatfor-the-badgeSimple Iconslogo slug
    config · stylefor-the-badge
    style=for-the-badge
logo=jest
    setbranded
  4. 04

    Copy Markdown

    Optionally wrap the badge in a link href so clicks navigate to CI, the npm page, or your docs. The output is plain Markdown — paste directly into README.md, CONTRIBUTING.md, or any GitHub comment.

    The Markdown is generated locally; only the SVG is fetched from Shields.io when the badge is actually rendered.

    clipboard.mdGitHublinked badge
    export · markdownready
    [![build](https://img.shields.io/…)](https://ci.example)
    ready to shipsuccess
Pro tips

Author Markdown that renders everywhere

GFM is the safe default

GitHub-Flavored Markdown is the de-facto baseline (tables, task lists, strikethrough). CommonMark is stricter but ubiquitous as a fallback.

Soft-break behaviour varies

A single newline is a space in CommonMark, a <br> in GFM. Toggle soft breaks when source matters.

Escape inside code fences

Backticks inside fenced blocks need a longer fence — three becomes four. Use ~~~ if your content has many backticks.

Anchors are slugified

GitHub lowercases, strips punctuation, and joins with hyphens. Duplicate headings get -1, -2 suffixes.

Tables need a header row

The dash row sets alignment (:---, :-:, ---:). Use Table Aligner for diff-friendly columns.

Front matter is YAML

Triple-dash blocks at the top of files are parsed by static-site generators. Use the Front-Matter Validator to catch syntax errors.

Related toolsREADME GeneratorProfile READMERepo TaglineMD EditorCheatsheetChangelog
Use Cases

When to add a badge

Build status, version, coverage, social.

Build status

Show CI health at a glance — green is reassuring. Render path uses marked with GFM extensions enabled (tables, task lists, strikethrough, autolinks), so what you preview matches what GitHub publishes bit-for-bit. Soft-break behaviour is configurable for chat-style vs prose Markdown.

GFM-compliant

Version badge

Pin the latest npm/PyPI version visually. Pairs cleanly with the Markdown Cheatsheet for syntax you can't quite remember — callout blocks, footnotes, definition lists. Output stays diff-friendly so style-only changes don't drown out real edits in PRs.

GitHub-perfect

Coverage

Coverage % beside the build badge tells a story fast. Cross-platform safe: anchors, code fences, and tables behave identically on GitHub, GitLab, Bitbucket, and Gitea. Heading-anchor slugs follow GitHub's lowercase-and-hyphenate rules so deep links survive a docs migration.

diff-friendly

License

Single badge communicating MIT/Apache at a glance. No server roundtrip — perfect for proprietary content you can't paste into a public tool. The full marked + GFM bundle ships with the page, so it works offline once loaded.

render-stable

Custom metric

Anything you can turn into label/message. Front matter (YAML / TOML / JSON) passes through unchanged so static-site pipelines (Jekyll, Hugo, Astro, Eleventy) read it correctly. Pair with the Front-Matter Validator to catch syntax errors before deploy.

cross-platform

Social proof

Stars, downloads, sponsors — works with any source. Output is reproducible: identical input always produces identical Markdown, so doc-generation scripts can rely on it for snapshot tests and embedded into release workflows.

SEO-friendly
FAQ

Frequently asked questions

Service that builds SVG badges from a URL. We construct the URL using your label/message/style choices.
Use a Simple Icons slug (github, npm, jest, etc.) in the Logo slug field.
Shields.io URL encoding requires - → -- and _ → __ inside the label/message.
Yes — set the Link href field and the badge becomes a clickable image.
No — the Markdown is generated and runs locally in your browser. The badge image loads from Shields.io.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!