Markdown Badge Generator

Generate Shields.io badges with live preview — copy Markdown or HTML snippets for your README.

Badge Options

Color
Live Preview
build
Markdown
HTML
Badge URL

Common Presets

About Markdown Badge Generator

Badges add visual status indicators to GitHub READMEs, wikis, and documentation. This tool builds Shields.io static badge URLs from your inputs and outputs the ready-to-paste Markdown or HTML snippet.

Features

  • Live preview — badge renders in real time as you type
  • Three outputs — Markdown snippet, HTML tag, and raw badge URL
  • Color picker — choose from presets or enter any hex code (without #)
  • Logo support — add any Simple Icons logo by slug
  • Link wrapping — optionally wrap the badge in a clickable link
  • Presets — one-click common badges for build, license, npm, coverage, and more

How to Use

  1. Enter a Label (left side) and Message (right side)
  2. Pick a Color from the swatches or type a hex value
  3. Choose a Style — flat is the GitHub default
  4. Optionally add a Logo slug from Simple Icons (e.g. github, npm)
  5. Optionally add a Link URL to make the badge clickable
  6. Copy the Markdown or HTML snippet and paste it into your README

Tips

  • Use -- in your label or message to render a literal hyphen
  • Use _ or %20 for a space character
  • Logo slugs must match exactly — look them up at simpleicons.org
  • The for-the-badge style uses uppercase text and is popular for stylized READMEs