GitHub Badge Builder
Compose shields.io badge URLs with label, message, color, style, and logo. Live preview with copy-paste Markdown and HTML for READMEs. Free and in-browser.
Loading tool...
What is GitHub Badge Builder?
The GitHub Badge Builder composes shields.io badge URLs visually: set a label, message, color, style, and optional logo, and get live preview plus copy-paste Markdown and HTML snippets for your README.
Key Benefits
- No shields.io URL syntax memorization needed
- Live preview shows the badge as GitHub will render it
- Both Markdown and HTML outputs with one-click copy
- Optional link wrapping and logo support
Common Use Cases
- •Adding build status and version badges to READMEs
- •Creating project status dashboards in repositories
- •Standardizing badge styles across an organization
- •Adding clickable badges that link to docs or releases
- •Quick badges for personal and portfolio projects
Create a GitHub Badge
- Set label and message: Type the badge label (left side) and message (right side), such as build and passing.
- Choose style and color: Pick from five styles and thirteen colors. The preview updates live.
- Add link and logo: Optionally set a URL to make the badge clickable, and add a logo slug from simple-icons.
- Copy Markdown or HTML: Click Copy on the format you need and paste it into your README.md.
Key Features
- Live preview that updates on every keystroke
- Five badge styles: flat, flat-square, plastic, for-the-badge, social
- 13 color presets plus custom hex support via shields.io
- Markdown and HTML output with one-click copy
- Optional link wrapping for clickable badges
- Logo parameter for project icons and brand marks
Frequently Asked Questions
What is shields.io?
Shields.io is a free service that generates badge images on the fly from URLs. It is the de facto standard for README badges on GitHub, supporting thousands of data sources and customizable styles.
How do dashes and underscores work in badges?
In shields.io URLs, dashes separate label, message, and color, so literal dashes must be escaped as double dashes (--). The builder handles this encoding automatically.
Can I use custom hex colors?
Yes. While the dropdown provides named colors, shields.io also accepts hex values without the # prefix. Replace the color segment in the URL with any 3 or 6 digit hex value.
Do badges slow down my README?
Each badge is one image request to img.shields.io. A handful of badges is negligible, but dozens can slow rendering. Use badges sparingly and consider combining related info into one badge.
