Badge Maker
Shields.io style badges. Enter a label and value, pick a color, download SVG or PNG. Perfect for GitHub READMEs.
About the badge generator
This tool produces flat, shields-style badges made of a label segment and a value segment, the same visual pattern used by open-source project READMEs, documentation sites and landing pages. You set the label text, the value text and the two colors, and the SVG is generated on the spot with the correct width for the text you typed.
SVG is the recommended export here: it stays sharp at any zoom level, is small enough to inline in a README and can be recolored later with a text editor. PNG export is included for places that do not accept vector files, such as some email clients and a few CMS image fields.
How to use it
- Type the label, for example "build" or "license", and the value it should show.
- Choose the value color and the label color.
- Preview the badge, then download the SVG or PNG.
- If you are editing a README, use Copy SVG to paste the markup directly into the file.
FAQ
Will the badge scale on a retina screen?
Yes. The SVG has no fixed pixel density, so browsers render it at the device's own resolution. The PNG is exported at 2x for the same reason.
Can I use these badges in documentation?
Yes, the output is your own artwork with no third-party assets. Pair it with a consistent visual style if the badges appear next to other branded graphics.