GitHub Badge (shields.io) Generator
Build shields.io badge URLs with correct escaping — static and dynamic badges, brand presets, logo + style + named/hex color pickers, link wrapping, and Markdown/HTML/RST/AsciiDoc embed output. Coverage, npm version, downloads, license, GitHub stars/forks/issues, build status, custom badges, batch row builder, history (localStorage), shareable URL. 100% client-side.
About GitHub Badge (shields.io) Generator
Build shields.io badge URLs with correct escaping — static and dynamic badges, brand presets, logo + style + named/hex color pickers, link wrapping, and Markdown/HTML/RST/AsciiDoc embed output. Coverage, npm version, downloads, license, GitHub stars/forks/issues, build status, custom badges, batch row builder, history (localStorage), shareable URL. 100% client-side. Everything runs locally in your browser — your data never leaves your device.
How to use
- Enter your input in the tool above.
- Adjust any options to your preference.
- Use the Copy or Download buttons to save the result.
- Everything happens locally — your data never leaves your browser.
FAQ
How does the badge generator work?
Pick a badge type (static custom, GitHub stars/forks/issues, build status, coverage, npm version, downloads, license, or a brand preset), set the label/message/color, optionally choose a logo (simple-icons slug), style (flat/flat-square/for-the-badge/plastic/social), and we generate a correctly escaped shields.io URL plus the embed code in Markdown, HTML, reStructuredText, and AsciiDoc formats — each ready to copy.
What escaping rules does shields.io require?
Shields.io splits the path on `--` so any literal dash in your label or message must be written as `--` (double-dash). Underscores become spaces, `%20` also works for spaces, and any literal `_` you want preserved must be written as `__`. Our encoder handles all of this automatically — type `build-status` and `CI / CD pipeline` and we emit `build--status--CI%20/%20CD%20pipeline` so the badge renders correctly instead of falling back to alt text.
What color and logo options are supported?
Colors: 19 named shields.io colors (brightgreen, green, yellowgreen, yellow, orange, red, blue, lightgrey, success, important, critical, informational, inactive, blueviolet, ff69b4, 9cf, beeaed, fedora) plus any hex color like `#ff6f00` (the leading `#` is stripped automatically). Logos: any simple-icons slug like `github`, `npm`, `docker`, `react`, plus an optional logoColor override (hex without #).
What badge types are pre-built?
Eight dynamic GitHub/npm/CI templates — GitHub stars, forks, issues, watchers, last commit; npm version, npm downloads, David-DM dependencies; CircleCI build, Codecov coverage, GitHub Actions workflow status, license (MIT/Apache/GPL). Each template takes your repo or package name and fills in the correct path. Plus 12 brand presets (GitHub, npm, Docker, React, Vue, Node, TypeScript, Python, Rust, Go, Linux, VS Code) for instant logo+color badges.
What extra features does this tool have versus hand-coding the URL?
(1) Eight dynamic badge templates (GitHub, npm, CI). (2) Static custom badge builder. (3) Twelve brand presets with logo + color. (4) Five styles (flat/flat-square/for-the-badge/plastic/social). (5) Named + hex color picker with validation. (6) simple-icons logo slug + logoColor. (7) Link wrapping (badge is clickable). (8) Four embed formats (Markdown / HTML / RST / AsciiDoc). (9) Batch row builder (multiple badges on one line). (10) Double-dash escaping with `__` underscore handling. (11) Live preview by loading the shields.io image. (12) Stats (badge count, by type). (13) History (localStorage, last 20). (14) Shareable URL with full config encoded. 100% client-side — your badge config is never uploaded.
Related tools
.bashrc / .zshrc Alias & Config Manager
Build shell aliases, functions, exports, and PATH edits in a visual editor, then export a clean, commented .aliases file sourced from both .bashrc and .zshrc — with shadowing detection against shell builtins and common CLI tools, function suggestions when args are needed, starter packs (git, docker, kubectl, navigation, safety, ls, dev, devops, data science), import of existing rc files, dedupe, history (localStorage), and shareable URL. 100% client-side.
Add / Subtract Date Calculator
Add or subtract years, months, weeks, days, hours, minutes and seconds from a starting date/time. Calendar-day or business-day mode with custom weekend + holiday list. Month-end policy toggle (clamp to last day vs overflow). Repeat/series mode (e.g. every 2 weeks x 10) with CSV export. Shareable URL. 100% client-side.
Age Calculator
Calculate exact age from a birth date in calendar years/months/days (no negative-day bugs) plus totals in months/weeks/days/hours/minutes/seconds. Next-birthday countdown with weekday. Feb-29 birthday policy toggle. Milestones (1,000 days, 10,000 days, 1 billion seconds). Zodiac sign + Chinese zodiac. Age gap comparison. Shareable URL. 100% client-side.
