To get a custom badge on Discord or in a project README, use the Badge Generator to create a static Shields.io image, preview it, and copy the direct URL, Markdown snippet, or HTML tag. This workflow is for custom project badges—not for awarding or attaching a Discord account badge. The generator lets you define the left-hand label, right-hand message, colors, supported style, and optional Simple Icons logo, then produces a canonical Shields.io URL with matching Markdown and HTML outputs. You can use the image URL in a destination that accepts remote badge images, paste Markdown into repository documentation, or use HTML on a site that accepts markup. Because the generator handles path separators, escaping, and query parameters, the badge stays readable while the underlying URL remains correct. The result is static, however, so use it for stable labels, versions, links, or statements you are prepared to maintain—not as automatic proof of a build, audit, or coverage report.
What the badge workflow actually creates
Use the workflow when you want a custom status badge in a README, documentation page, release note, or project dashboard. The resulting image can also support a Discord-facing workflow when the destination accepts an image attachment or remote image, but the tool does not issue a badge on a Discord user profile. That distinction matters: a generated badge is presentation content, while a profile badge is an account feature outside this generator.
All three outputs are derived from one canonical Shields.io URL. Choose the output by the destination that will render it, then test that destination rather than judging only the form.
| Output | Best fit | What to verify |
|---|---|---|
| Direct image URL | Systems that accept a remote badge image, or a browser download for a Discord attachment | The image opens and the wording, logo, and colors appear correctly |
| Markdown | GitHub or GitLab READMEs, issue templates, and documentation files | The repository destination renders the badge as intended |
| HTML | A website that accepts image markup | The image source loads and the escaped alt description remains useful |
Choose the text, color, style, and logo
Begin with a short label that names the subject, such as build, docs, version, or license, followed by a concise message. Labels and messages must contain visible text, remain within a practical length limit, and contain no control characters. Keep the wording short enough to scan at the size where the badge will appear, and avoid using color as the only explanation of its meaning.
| Field | Accepted input | What it controls |
|---|---|---|
| Label | Visible text within the practical length limit, with no control characters | The text on the left side of the badge |
| Message | Visible text within the practical length limit, with no control characters | The text on the right side of the badge |
| Message color | A compact named form or three- or six-digit hexadecimal value; an optional leading hash is removed | The background behind the message |
| Label color | An optional color using the accepted color forms | The background behind the label |
| Style | One of the supported styles | The badge’s overall visual treatment |
| Logo | An optional value that must look like a Simple Icons slug | An optional logo beside the badge text |
Create the badge in four steps
- Enter the two text fields. Open the Badge Generator and place a short label in the left-hand field. Add the concise status, version, link text, or other message that should appear on the right.
- Set the appearance. Choose a named or hexadecimal message color, select an optional label color, and pick a supported style. Compare the options against the surrounding page so the badge remains legible.
- Add a logo and inspect the preview. Optionally enter a Simple Icons slug, then confirm that the live Shields.io preview shows the intended text, colors, style, and icon.
- Copy the appropriate output. Choose the image URL, Markdown, or HTML, paste it into the intended destination, and test the rendered result. Do not assume the preview alone proves that the final page or message displays it correctly.
Add a custom badge on Discord without confusing it with a profile badge
Badge Generator does not publish directly to Discord. Its job ends when it provides the image URL and the two matching snippets. For a Discord-facing result, choose an appropriate delivery route: attach the badge image to a message when the destination accepts that image format, or place the Markdown badge in a repository README and share the rendered project page.
- Choose the Discord context. Decide whether the badge belongs in a channel message, a project README linked from Discord, or another page you maintain. This prevents a custom project badge from being mistaken for an official account badge.
- Generate and confirm the badge. Enter the label and message, select the colors and style, add a logo if needed, and verify the live preview before copying anything.
- Prepare a channel attachment when appropriate. Copy the direct image URL, open it in a browser, and attach the downloaded image if the target accepts that file format. The Markdown and HTML outputs are intended for destinations that support those formats, so do not force them into a message that expects an image attachment.
- Use a shared README route for project documentation. Copy the Markdown snippet into the relevant README. GitLab project badge documentation explains where project badges can appear, while the same Markdown approach works in GitHub-based documentation.
- Test the final experience. Open the published repository or inspect the sent message. Add surrounding prose and a meaningful alt description where context matters, and remember that a platform proxy may cache a remote image.
This approach adds a custom visual asset to Discord-facing content without claiming that the image is an official Discord profile badge.
Why copy the generated URL instead of building it by hand
A hand-written static badge URL has several moving parts. The label, message, and core color follow a structured path, while optional style, label-color, and logo values belong in query parameters. Literal dashes and underscores in visible text are doubled because Shields.io uses those characters to encode spaces and separate badge parts. Other special characters are URL encoded. Getting any of those rules wrong can change the visible text or break the path.
The generator applies the documented escaping rules and adds supported options through URLSearchParams. It then derives the Markdown and HTML snippets from the same canonical URL, keeping all three outputs aligned. The Shields.io static badge reference documents the underlying URL model if you need to understand the path structure.
Validation is strict around ambiguous or unsafe input, but it is not a guarantee that every external resource exists. The form checks that colors match the accepted forms and that logo values look like Simple Icons slugs. It does not confirm whether every named color or logo currently exists on an external service. If a logo fails to appear, compare the slug with the current Simple Icons catalog and generate the badge again.
Check the preview and the final destination
Badge generation happens in your browser, and the tool requires no account or saved badge history. The preview itself is loaded from Shields.io, so displaying it makes a network request to that provider. Your form data is not posted to Lizely, but Shields.io receives the image request needed to render the preview.
Preview several styles at the size where the badge will really appear. A badge that looks balanced in the generator may need different surrounding spacing or a more concise message on a narrow mobile screen. After copying the output, test the actual README, website, or Discord attachment. The HTML output supplies an escaped alt attribute and image source, which makes it suitable for sites that accept markup. If the target platform proxies remote images, an updated badge may remain cached outside the generator, so check the destination before assuming the change failed.
Keep a static badge accurate after publishing
A generated badge is presentation, not verification. Manually entering a message such as passing, secure, or 100% does not confirm that a build ran, an audit passed, or coverage reached that level. It only displays the text you chose. For facts that must change automatically, use a badge backed by the relevant CI system, package registry, or verified endpoint. Static badges are better suited to stable labels, links, versions, and statements you are prepared to maintain.
Give every badge enough surrounding context to remain meaningful without relying on color. A short sentence, descriptive link text, or meaningful alt description can explain what the label represents and where it leads. This is especially useful when the badge appears beside other status indicators or when a reader cannot distinguish the colors. The goal is a compact visual cue that remains accurate, understandable, and easy to maintain.