Softonic

README Badge Generator

Step 1 / 2 Markdown
Results

Type a label, a message and a colour and this generator builds a static shields.io badge: the flat little pill you see under a README title (build | passing, license | MIT, version | 1.4.0). It shows a live preview and gives you both the Markdown and the HTML to paste. Shields.io is the de-facto badge service for open-source projects; the URL format is simple but fiddly to memorise, so a small GUI saves a few minutes when you set up a new repo.

How to build a badge

  1. 1

    Write the label and message

    The label is the left half (grey); the message is the right half. Type whatever you want the pill to say: `build` / `passing`, `coverage` / `98%`, `license` / `MIT`.

  2. 2

    Choose a colour

    A named colour (brightgreen, blue, red, orange) or a hex code like `#ff0000`. It fills the right half of the badge.

  3. 3

    Style it

    Pick a style (flat, flat-square, for-the-badge, plastic, social) and, optionally, a logo by its simple-icons slug (github, npm, docker).

  4. 4

    Copy the Markdown or HTML

    Paste it into your README. Add the optional link URL to make the badge clickable. Shields.io renders the SVG on request.

Common badge recipes

This tool builds the static badge/label-message-color form. For badges that pull live data (build status, version, downloads), copy one of the shields.io URL patterns below and paste it straight into your README.

Purpose Shields.io URL pattern
npm version https://img.shields.io/npm/v/{package}
npm downloads https://img.shields.io/npm/dm/{package}
GitHub stars https://img.shields.io/github/stars/{owner}/{repo}
GitHub last commit https://img.shields.io/github/last-commit/{owner}/{repo}
GitHub workflow status https://img.shields.io/github/actions/workflow/status/{owner}/{repo}/{workflow.yml}
License https://img.shields.io/github/license/{owner}/{repo}
PyPI version https://img.shields.io/pypi/v/{package}
Docker pulls https://img.shields.io/docker/pulls/{org}/{image}
Codecov coverage https://img.shields.io/codecov/c/github/{owner}/{repo}
Static label https://img.shields.io/badge/{label}-{message}-{color}

Badge style comparison

  • flat, classic rounded rectangles. Default.
  • flat-square, sharp corners, slightly more modern.
  • for-the-badge, all-caps block letters, maximum attention.
  • plastic, gradient and inset shadow, old-school.
  • social, round corners and muted, matches GitHub’s own star/fork buttons.

When to use badges

  • Build + coverage, tells visitors the project is actually maintained.
  • Version + downloads, tells them it is in use.
  • License, legal signal for anyone considering contribution or use.
  • Docs link, external docs site or rustdoc.rs.
  • Chat / support, Discord, Matrix, GitHub Discussions link.

When not to use badges

  • Vanity stats that never update. A “stars” badge for a repo with 0 stars makes the project look dead.
  • Every possible metric. Five badges tell a story; fifteen tell nothing.
  • Duplicated info. License + “MIT” twice, or version shown both as a badge and the first line of prose.
  • Badges for services you don’t use. Don’t add Codecov if you don’t have coverage reporting set up, the broken badge is worse than no badge.

Caching and reliability

Shields.io aggressively caches requests. A badge that updates slowly usually just needs a cache bust (append ?v=2) or a few minutes. If shields.io is down, GitHub renders “shields” with no graphic, worth mentioning, but it recovers fast.

Frequently Asked Questions

No. Shields.io is free and donation-funded. Very high-volume users are asked to self-host or support the project.

Yes. Shields is open source; you can run it behind your own domain. Most projects don’t need to: the free service is reliable.

Caching. Append ?cacheSeconds=60 or ?v=anything to force a refresh. Expect up to a few minutes of propagation.

Yes: add ?logo=github (or any simple-icons slug). Use ?logoColor=white to tweak the icon colour.

No. Everything runs in the browser and the URLs are generated client-side for copying.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Wheel Explorer

Explore the colour wheel interactively. Rotate harmonies, compare HSL vs RYB, spot complementary and triadic pairs in real time.

Tool available in other languages