Badge Generator
Build a Shields.io badge URL, Markdown snippet, and HTML image tag without memorizing path escapes or query parameters.
Privacy: your files never leave your device. All processing happens locally in your browser.
How to use
- 1.Enter a short label and the message you want the badge to display.
- 2.Choose a named or hexadecimal badge color, an optional label color, and a supported style.
- 3.Optionally enter a Simple Icons slug, then confirm the live Shields.io preview.
- 4.Copy the image URL, Markdown, or HTML and test it in the destination document.
About Badge Generator
A small status badge can make a README, documentation page, release note, or project dashboard much easier to scan. The hard part is rarely the wording. It is remembering how a static Shields.io URL separates the label, message, and color, how spaces and literal separators must be escaped, and which query parameters control the final appearance. Badge Generator turns those details into a focused form. Enter the text that should appear on the left and right sides, choose a named color or hexadecimal value, select a supported style, and optionally add a Simple Icons logo slug. The result updates immediately, so you can compare the visual preview with the generated code before copying anything.
The generator returns three useful formats. The direct image URL is suitable for systems that accept a remote badge image. The Markdown version can be pasted into a GitHub or GitLab README, issue template, or documentation file. The HTML version supplies an escaped alt attribute and image source for sites that accept markup. Literal dashes and underscores in visible text are encoded with Shields.io's documented doubling rules, while other special characters are URL encoded. This prevents a dash inside a label from being mistaken for the separator between badge parts. Optional style, label color, and logo values are added as query parameters instead of being mixed into the path.
Validation is intentionally strict around ambiguous or unsafe input. Labels and messages must contain visible text, stay within a practical length limit, and cannot contain control characters. Colors accept a compact named form or three- and six-digit hexadecimal values, with an optional leading hash removed before the URL is built. Logo values must look like Simple Icons slugs. These checks catch common typing mistakes without pretending to validate whether every possible named color or logo currently exists on an external service. The preview itself is loaded from Shields.io, so displaying it makes a network request to that provider; the form data is not posted to Lizely.
A generated badge is presentation, not proof. A manually entered ‘passing’, ‘secure’, or ‘100%’ message does not verify a build, audit, or coverage report. Use static badges for stable labels, links, versions, or statements you are prepared to maintain. For automatically changing facts, use a badge backed by the relevant CI system, package registry, or verified endpoint instead. Also add surrounding prose or a meaningful alt description where context matters, because color alone should never carry the full meaning.
For predictable results, begin with a short label such as build, docs, version, or license and a concise message. Preview several styles at the size where the badge will actually appear. Copy the Markdown for repository documentation or HTML for a web page, then test the rendered destination. If a logo does not appear, verify its slug against the current Simple Icons catalog. If a target platform proxies remote images, changes may be cached outside this tool. Badge Generator stays entirely client-side except for the remote preview image, requires no account, and does not save a badge history.
Methodology & sources
Builds the documented Shields.io static badge path by escaping literal separators, URL-encoding text, validating color and logo inputs, and adding supported options through URLSearchParams. Markdown and HTML snippets are derived from the same canonical URL.
Frequently asked questions
- Why are dashes or underscores doubled in the generated path?
- Shields.io uses dashes to separate badge parts and underscores for spaces. Doubling preserves a literal dash or underscore in the visible text.
- Does the preview send my form data to Lizely?
- No. Generation happens in your browser. The preview image is requested from Shields.io using the URL you created, so that provider receives the image request.
- Can this badge update automatically?
- This tool creates static badges. Use a CI, registry, or endpoint badge when the displayed value needs to track changing external data.
Related tools
- Code to Image GeneratorTurn complete code text into a clean light or dark PNG locally, without uploading or executing it.
- HTML CleanerNormalize an HTML fragment through the browser parser and optionally remove comment nodes without previewing or executing the result.
- JSON FormatterFormat, minify, and validate JSON in your browser — pretty-print or compress with pinpoint error locations.
- ASCII TableLook up every standard 7-bit ASCII code with exact decimal, hexadecimal, octal, and binary values.
- ANSI Color Codes GeneratorBuild and copy raw SGR escape sequences and search the standard 8 plus bright 8 terminal color codes.
- BOM RemoverRemove exactly one leading U+FEFF from pasted decoded text locally while preserving every internal, trailing, or second leading occurrence.