piapia123
en

Shield Badge Generator

Web

Everything runs locally in your browser — nothing is uploaded

Badge content
Preview (drawn locally, no network)

This preview is an approximation drawn locally: the live image is rendered by shields.io with real font metrics, so widths may differ by a few pixels.

Ready-to-paste snippets

Build the little badges that live in READMEs: fill in the left and right text, pick colours and a style, and copy the ready-to-paste snippets (URL, Markdown, HTML, reStructuredText) plus an offline SVG. ⚠️ The preview is drawn locally — this page makes no network requests. The usual shortcut is an `<img src="https://img.shields.io/…">` preview, but that makes the page fetch an image from a third party on every keystroke — and sends your text there too. So the preview here is an SVG assembled locally; not a byte leaves the page. ⚠️ The generated URL does point at shields.io, though. Once you paste it into a README, your readers’ browsers fetch that image from shields.io — a request neither you nor this tool made, but one you should know about. If you would rather nobody contacted a third party, use the “SVG source” snippet: it is self-contained and renders wherever you put it. ⚠️ The local preview is an approximation. The live image is rendered by shields.io with real font metrics, while this page can only estimate from a width table (there is no canvas in Node, and no guarantee which fonts a browser has). Widths may therefore differ by a few pixels — better to say so than to pretend precision. The four styles: `flat` is the default rounded look, `flat-square` is square, `plastic` adds a subtle vertical sheen, and `for-the-badge` is taller with larger, all-uppercase text.

Features

  • The live preview is drawn locally — the page issues no network requests
  • Four styles: flat, flat-square, plastic, for-the-badge
  • Named colours (`brightgreen` and friends) or a custom hex, with a separate label colour
  • Optional simple-icons logo (enter its slug, e.g. `github`)
  • Five snippets: badge URL, Markdown, HTML, reStructuredText, and offline SVG source
  • Download the SVG — that snippet depends on nothing
  • Every snippet copies on its own

How to use

  1. Fill in the left and right text
  2. Pick colours and a style (add a logo slug if you want one)
  3. Check the preview and adjust
  4. Copy the snippet you need, or download the SVG

FAQ

Does this tool send my input to shields.io?
No. The preview is an SVG assembled locally and the page makes no requests — open your developer tools’ network panel and type a few characters; you will see no external requests. But the URL you share does point at shields.io: when someone opens your README, *their* browser fetches that image. That request happens on your site, made by your reader, and has nothing to do with this tool — but since the URL points at a third party, you should know it exists. If you would rather your readers never contact a third party, use the “SVG source” snippet: drop the SVG into your repository or page and it is self-contained.
Why does the preview differ slightly from what GitHub shows?
Because the width is estimated. shields.io measures label width server-side with real font metrics, whereas this page assembles SVG in the browser — it cannot assume Verdana is installed, and loading a font just to measure a string would be absurd. So it uses a built-in width table (`i` and `l` narrower than `m` and `w`, CJK counted as double-width). The upshot: colours, style and text match exactly; widths may differ by a few pixels. The live image rendered by shields.io is authoritative. As a side benefit, the uppercase transform for `for-the-badge` is exact here — it does not depend on fonts.
Can the label contain non-Latin text?
Yes. Non-ASCII text is percent-encoded in the URL (`café` becomes `caf%C3%A9`) and shields.io displays it correctly. CJK characters are also counted as double-width in the local preview, so they are not squashed. Do note that the width algorithms still differ (see the previous question), and that difference is more visible with double-width characters.

Related tools

User-Agent Parser

Web

Parse a user agent into browser, version, OS, device type and engine, and see which rules matched. Pattern matching only. Runs entirely in your browser.

HTTP Status Codes

Web

Look up an HTTP status code for its meaning, 1xx–5xx class, typical uses and common traps. Runs entirely in your browser.

MIME Types

Web

Look up a MIME type from an extension, or the default extension for a media type. Common types only. Runs entirely in your browser.

URL Parser

Web

Parse a URL into scheme, host, port, path, query parameters and fragment, with each parameter shown raw and decoded. Runs entirely in your browser.

.gitignore Generator

Web

Generate a .gitignore from language, framework, editor and OS templates. Sections are merged and duplicates removed. Runs entirely in your browser.

Image to Base64

Web

Convert an image to Base64 or a data URL by dropping, choosing or pasting it. Resize and switch format, all locally — nothing is ever uploaded.

← Back to all tools