Are dynamic badges supported?

Not from this tool — use shields.io endpoint URLs directly for dynamic data: version from package.json (img.shields.io/npm/v/PACKAGE), build status from GitHub Actions (img.shields.io/github/actions/workflow/status/USER/REPO/WORKFLOW), npm downloads (img.shields.io/npm/dm/PACKAGE), etc. shields.io has comprehensive docs covering hundreds of integrations.

What's the right number of badges?

3-5 for most projects. More than 7 starts to look like decoration rather than information. Pick the badges that matter for new visitors trying to assess: license, current version, build status, primary download/contribution stat. Skip the social/sponsor badges unless they're meaningful (some projects use them as primary calls-to-action).

How do I make a badge clickable?

Wrap in a link in your Markdown: `[![label](badge.svg)](link.com)`. The tool generates this format if you provide a link URL. In raw HTML: ` `.

What's the right color?

Convention: green/brightgreen for 'good' (passing, current, available), yellow/orange for 'warning' or 'old', red for 'bad' (failing, deprecated), blue for neutral / informational, lightgrey for 'misc'. Brand-color badges (a Discord badge in Discord's purple) often use the brand's primary color regardless of these conventions.

Will the badge work everywhere?

Yes for any place rendering Markdown or HTML with image support. GitHub README, GitLab README, Bitbucket, Notion, Substack, blog posts, documentation sites — universal. The badge image is hosted on shields.io's CDN; their uptime is very good but not 100% (rare brief outages happen). For mission-critical badges, consider a self-hosted alternative like badgen.net.

What's the difference between flat, flat-square, and for-the-badge?

Flat (default): rounded corners, modern, slightly subtle. Flat-square: sharper corners, blockier, slightly more industrial. For-the-badge: uppercase text, larger size, more attention-grabbing — useful when the badge is a primary CTA. Plastic: gradient fill, classic shields.io look, slightly retro. Social: gradient background with optional icon, designed for follow/star/sponsor buttons.

Developer Utilities · Free tool

GitHub Badge Generator

Generate custom shields.io badges for your GitHub README in seconds. Customize the label, message, and color instantly with this free, browser-only tool.

Updated June 2026

Label (left side)Message (right side)ColorStyleLink URL (optional)

Preview

Markdown (README.md)

![build: passing](https://img.shields.io/badge/build-passing-brightgreen?style=flat-square)

HTML

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

Image URL

https://img.shields.io/badge/build-passing-brightgreen?style=flat-square

Generates badges via shields.io — same service used in most popular OSS READMEs. Free, no rate limits for low-volume use. For dynamic badges (live build status, version from package.json), use shields.io endpoint URLs directly.

Found this useful?Email Buy Me a Coffee

What it does

Generate shields.io-style badges for your GitHub README, documentation, blog posts, or any web page. Customize label (left side), message (right side), color, style (flat / flat-square / for-the-badge / plastic / social), and an optional link target. Live preview; outputs Markdown, HTML, and raw image URL formats.

Shields.io is the de facto standard for project badges since around 2014 — billions of badge requests served per month. The format started as a way to show CI status, npm version, and license at a glance on GitHub READMEs, and grew into the universal mini-info graphic for tech projects. Most popular open-source projects have a row of badges at the top of their README: version, build status, license, downloads, code coverage, contributors, etc.

Two badge types: static (the badge shows fixed text — version 1.2.3, license MIT) — what this tool generates; and dynamic (the badge fetches real-time data from a service — current package version, current build status, current download count). Dynamic badges use shields.io endpoint URLs that look likeimg.shields.io/npm/v/<package> and shields.io fetches the data on each render. For dynamic badges, use shields.io directly; this tool is for static custom badges.

Common static-badge use cases: project status (active / maintenance-mode / abandoned), technology stack (built with Next.js, hosted on Vercel), support status (Discord channel, Patreon, sponsor link), certifications (HIPAA-ready, SOC2-compliant), blog post tags (date, reading time, category).

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/github-badge-generator" width="100%" height="720" frameborder="0" loading="lazy" title="GitHub Badge Generator" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

How to use it

Enter the label (left text). Common conventions: 'license', 'build', 'version', 'docs', 'discord'.
Enter the message (right text). The actual value: 'MIT', 'passing', 'v1.2.3', 'available', 'join'.
Pick a color. Standard semantic colors: brightgreen (success), green, yellow, orange, red, blue, lightgrey. Or pick a brand hex.
Pick a style: flat (default, modern), flat-square (sharper edges), for-the-badge (uppercase, large), social (gradient + icon, retro), plastic (gradient classic).
Optional: add a link URL — the badge becomes clickable.
Copy the Markdown for README files, HTML for web pages, or raw image URL for embedding elsewhere.

When to use this tool

Adding a row of status badges to a GitHub README.
Documenting a project's tech stack or compliance status.
Adding clickable links (Discord, sponsor, support) to a project landing page.
Marking blog posts with publication date, reading time, or category.

When not to use it

Dynamic data badges (live npm version, CI status, download count) — use shields.io endpoint URLs directly. shields.io has hundreds of pre-built integrations.
Brand-critical badges where you need pixel-perfect design control — design custom SVG badges instead.
Badges with complex layouts (icon + multiple data points) — shields.io is single-row label-message format only.

Common use cases

Quick generation during a typical workday
Pre-decision sanity-check on inputs and outputs
Educational use — demonstrating the underlying concept
Onboarding a colleague who needs the same calculation/conversion

Frequently asked questions

Are dynamic badges supported?: Not from this tool — use shields.io endpoint URLs directly for dynamic data: version from package.json (img.shields.io/npm/v/PACKAGE), build status from GitHub Actions (img.shields.io/github/actions/workflow/status/USER/REPO/WORKFLOW), npm downloads (img.shields.io/npm/dm/PACKAGE), etc. shields.io has comprehensive docs covering hundreds of integrations.
What's the right number of badges?: 3-5 for most projects. More than 7 starts to look like decoration rather than information. Pick the badges that matter for new visitors trying to assess: license, current version, build status, primary download/contribution stat. Skip the social/sponsor badges unless they're meaningful (some projects use them as primary calls-to-action).
How do I make a badge clickable?: Wrap in a link in your Markdown: `[![label](badge.svg)](link.com)`. The tool generates this format if you provide a link URL. In raw HTML: `<a href="..."><img src="..." alt="label"></a>`.
What's the right color?: Convention: green/brightgreen for 'good' (passing, current, available), yellow/orange for 'warning' or 'old', red for 'bad' (failing, deprecated), blue for neutral / informational, lightgrey for 'misc'. Brand-color badges (a Discord badge in Discord's purple) often use the brand's primary color regardless of these conventions.
Will the badge work everywhere?: Yes for any place rendering Markdown or HTML with image support. GitHub README, GitLab README, Bitbucket, Notion, Substack, blog posts, documentation sites — universal. The badge image is hosted on shields.io's CDN; their uptime is very good but not 100% (rare brief outages happen). For mission-critical badges, consider a self-hosted alternative like badgen.net.
What's the difference between flat, flat-square, and for-the-badge?: Flat (default): rounded corners, modern, slightly subtle. Flat-square: sharper corners, blockier, slightly more industrial. For-the-badge: uppercase text, larger size, more attention-grabbing — useful when the badge is a primary CTA. Plastic: gradient fill, classic shields.io look, slightly retro. Social: gradient background with optional icon, designed for follow/star/sponsor buttons.

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →