GitHub Badge Generator

How to use it

1. Fill in the two halves. The message on the right is required; the grey label on the left may be left empty, which gives a message-only badge. Both take up to 256 characters.
2. Choose a colour by shields name — brightgreen, green, yellowgreen, yellow, orange, red, blue, grey, lightgrey, blueviolet, or the aliases success, important, critical, informational and inactive — or hex in 3, 4, 6 or 8 digits, with or without the hash. A label colour overrides the default #555 left half.
3. Pick flat or flat-square. Flat rounds the corners with a 3 px clip and lays a gradient over both halves; flat-square drops both for crisp edges. A logo slug only writes logo= into the URL.
4. Copy the URL, or switch the output tab to Markdown, HTML or RST and copy the line — given a link target it comes back wrapped in that format's anchor. Or download the SVG and commit it.

Type a label and a message, pick a colour and a style, and the badge is drawn here as SVG while you type. Copy the img.shields.io URL, the Markdown, HTML or reStructuredText line, or the SVG itself. Nothing is fetched: the preview is rendered on this device and the URL is assembled locally.

Examples

build · passing · brightgreen · flat

https://img.shields.io/badge/build-passing-brightgreen
![build: passing](https://img.shields.io/badge/build-passing-brightgreen)
89 × 20 px drawn here · 88 px served by shields.io

a-b · c_d e · blue

https://img.shields.io/badge/a--b-c__d%20e-blue
aria-label="a-b: c_d e" · 68 px here and 68 px from shields.io

github-workflow · facebook/react · runtime_build_and_test.yml · main

https://img.shields.io/github/actions/workflow/status/facebook/react/runtime_build_and_test.yml?branch=main
this URL is text — nothing on this page loads it; shields reads the live value when a reader of your README loads the image

</text><script>alert(1)</script>

https://img.shields.io/badge/x-%3C%2Ftext%3E%3Cscript%3Ealert(1)%3C%2Fscript%3E-blue
<text x="1155" y="140" textLength="1886">&lt;/text&gt;&lt;script&gt;alert(1)&lt;/script&gt;</text>

Every example on this page is executed against the same engine that powers the tool, on every build.

Common errors

`chartreuse` is not a shields colour — expected one of brightgreen, green, yellowgreen, yellow, orange, red, blue, grey, lightgrey, blueviolet (or the aliases success, important, critical, informational, inactive, gray, lightgray), or a 3/4/6/8-digit hex such as `#4b0`

CSS colour keywords are not shields colour names. On the server an unknown name silently returns a grey badge — hence the refusal here.

the message is empty — a badge needs a right-hand side; the label is the optional half

The half most people expect to be optional is the required one: clearing the label yields a valid one-colour badge, clearing the message leaves nothing to draw.

the label is 300 characters — this tool's limit is 256 characters per field

256 characters per field is this tool's ceiling, not the format's. The count printed is the length actually submitted, so it is clear how much has to go.

`main` is not a valid workflow — this endpoint takes the workflow FILE, such as `ci.yml` or `release.yaml`

The endpoint identifies a workflow by its file name in .github/workflows, not by the name: field inside it. Every field is grammar-checked, so a badge that could only 404 is refused.

Keyboard shortcuts

⌘/Ctrl + C

Copy the emitted line while focus is in the tool and no text is selected; a real selection copies itself.

⌘/Ctrl + Shift + C

Copy that same line even while a text selection exists.

⌘/Ctrl + S

Download badge.svg — the unmodified bytes of the render, not the page.

? or ⌘/Ctrl + /

Open the keyboard shortcut overlay.

Esc

Close the topmost dialog; every field keeps its value.