deftools.io Developer Tools

🛡️ README Badge Generator

Build shields.io badges for your README — pick a style, label, message, and colors to get instant markdown or HTML.

Badge preview Enter a label and message to see a preview
 
 
 

About this tool

Shields.io is the standard way to add compact status badges to GitHub READMEs, documentation, and project sites. Instead of memorizing the URL format, this builder lets you set the label, message, style, and colors visually and gives you the markdown or HTML to paste.

For example, a build: passing badge with the flat style and a green message produces: ![build](https://img.shields.io/badge/build-passing-brightgreen?style=flat) — paste that into any README.md and it renders as a live badge.

Supported styles: Flat (clean, modern), Flat Square (flat with square corners), Plastic (glossy gradient), For the Badge (large, bold), and Social (designed for follower counts and social links).

FAQ

Do the badges work offline?

No. Shields.io badges are live images fetched from img.shields.io — they always show the current state. If you need offline badges, export the SVG and embed it directly instead.

What logos are available?

Shields.io supports all Simple Icons slugs (simpleicons.org). Common ones: github, npm, docker, python, javascript, rust, react, node.js. Enter the slug in the Logo field and it will appear on the badge.

Why does my badge show a default color when I use a named color like "brightgreen"?

The Message color field takes hex values (without the #). Named colors like "brightgreen", "red", or "blue" are also supported by shields.io — just type them directly into the text field.

Can I use these badges in places other than GitHub?

Yes, the HTML output works anywhere that renders `<img>` tags: GitLab, Bitbucket, Confluence, Notion, personal websites, and documentation pages built with any static site generator.

More developer tools

Copied!