Zero Signup ToolsFree browser tools

Generator Tools

GitHub Badge Generator

Build Shields.io badges for GitHub READMEs and docs. Pick label, message, color, style, and logo. Copy Markdown, HTML, reST, AsciiDoc, or SVG.

GitHub badge generator

Presets

Message color

Use a Shields named color or any hex value. The picker writes the value in 6-digit hex without the leading #.

The page preview always shows the flat style for a stable offline render. The shields.io URL applies your chosen style when fetched.

Shields fetches the icon from simpleicons.org by slug. The page preview omits the logo for a deterministic local render.

Preview (flat style, local SVG)

build: passing build passing

The preview is drawn entirely in your browser using the flat template. Live shields.io URL output reflects your chosen style and logo when the badge is embedded.

Shields.io URL

https://img.shields.io/badge/build-passing-brightgreen

Markdown

![build: passing](https://img.shields.io/badge/build-passing-brightgreen)

HTML

<img alt="build: passing" src="https://img.shields.io/badge/build-passing-brightgreen">

reStructuredText

.. image:: https://img.shields.io/badge/build-passing-brightgreen
   :alt: build: passing

AsciiDoc

image:https://img.shields.io/badge/build-passing-brightgreen[build: passing]

BBCode

[img alt="build: passing"]https://img.shields.io/badge/build-passing-brightgreen[/img]

How escaping works

  • Inside the static badge path the label, message, and color use special escapes:
    • "-" becomes "--"
    • "_" becomes "__"
    • " " (space) becomes "_"
  • After those substitutions, any remaining unsafe characters are percent-encoded. Slashes, plus signs, and Unicode characters all survive correctly.
  • Colors accept the named Shields palette (brightgreen, blue, orange, red, lightgrey, blueviolet, plus aliases like success, important, critical, informational) or any 3 or 6 digit hex with or without the leading hash.
  • Logo slugs come from the Simple Icons library. Use nextdotjs for Next.js, node.js for Node.js, and the brand name in lower case for most others.

Badge styles

  • flat the default. Rounded corners, subtle gradient, the most common look in README files.
  • flat-square the same proportions as flat with hard square corners and no gradient. Reads well at small sizes.
  • plastic a glossy gradient style. Looks dated but is still widely used.
  • for-the-badge taller, uppercase, bold. Best for hero sections and marketing READMEs.
  • social mimics the GitHub social count badges with a counter pill on the right. Use a number in the message field.

How to use

  1. Pick a preset (Build passing, Version, License MIT, PRs welcome, npm downloads, Made with TypeScript, Powered by Next.js, or Coverage) to start from a realistic example, or build from scratch.
  2. Type your label (left text) and message (right text). The page preview and all snippets update instantly.
  3. Choose a message color from the Shields palette swatches, or type any 3 or 6 digit hex value. Optionally set a label color and a separate label background.
  4. Pick a badge style from flat, flat-square, plastic, for-the-badge, or social. The shields.io URL applies the chosen style when embedded; the page preview always uses the flat style.
  5. Optionally add a Simple Icons logo slug (github, npm, typescript, nextdotjs) and a logo color (white, black, or hex). Add a link URL to make the badge clickable.
  6. Copy the URL, Markdown, HTML, reStructuredText, AsciiDoc, or BBCode snippet, or click Download SVG to grab the offline copy of the preview.

About this tool

GitHub Badge Generator builds the Shields.io static badges you see in README files, package pages, and project sidebars across GitHub, GitLab, npm, PyPI, Cargo, and Docker Hub. Enter a label (the left side) and a message (the right side), pick a color from the Shields palette or any hex value, choose a style (flat, flat-square, plastic, for-the-badge, or social), and optionally add a Simple Icons logo plus a target link. The tool builds the canonical img.shields.io URL with the exact path-segment escaping Shields requires: hyphens become double hyphens, underscores become double underscores, spaces become single underscores, then any remaining unsafe characters are percent-encoded. A live SVG preview of the flat style is drawn entirely in your browser so the page works offline and shows what your badge will look like without making any network request. Output snippets are generated in Markdown, HTML, reStructuredText, AsciiDoc, and BBCode so you can paste the badge into a README, a Sphinx documentation page, an Antora or Asciidoctor site, or a forum post. An optional link URL wraps the badge so it becomes clickable, with a warning if the link is missing the https:// scheme. Presets include build passing, version, license MIT, PRs welcome, npm downloads, made with TypeScript, powered by Next.js, and coverage so you can start from a realistic example. You can also download the local SVG to embed offline. Nothing is uploaded; the badge data and snippets never leave your browser.

Free to use. Works in your browser. No signup, no login.

Related tools

You may also like

All tools
Generator

Markdown Table Generator

Editable grid, column alignment, paste from spreadsheet, live preview.

Open tool

Text

Markdown Editor

Live markdown editor with toolbar, preview, table of contents, and .md or .html download.

Open tool

Developer

Conventional Commits Builder

Generate semantic git commit messages with type, scope, body, breaking change, and footers.

Open tool

Developer

Gitignore Generator

Build a .gitignore from curated language, framework, editor, and OS templates.

Open tool

Generator

Slug Generator

Turn titles into clean URL slugs.

Open tool

Generator

QR Code Generator

QR codes for URLs, text, email, phone, SMS, WiFi, and vCard with PNG and SVG download.

Open tool

All toolsGenerator Tools