Shields.io Badge Maker#
“Struggling to create the perfect shields.io badge? Here’s a quick, practical guide—with real examples—to help you avoid common pitfalls and craft badges that stand out.”
| Rendered Badge | Goal | URL Structure | Key Tips |
|---|---|---|---|
| Basic Badge | https://img.shields.io/badge/<LEFT_TEXT>-<RIGHT_TEXT>-<COLOR> |
Use a valid hex color (e.g., ED8B00 for Java). If <RIGHT_TEXT> is not a color, it will appear as text. |
|
| Logo Integration | ?logo=<LOGO>&logoColor=<LOGO_COLOR> |
Find the correct logo name on Simple Icons. Use openjdk for Java, not java. |
|
| Style: Flat | ?style=flat |
Use flat for a minimalist look. |
|
| Style: For the Badge | ?style=for-the-badge |
Use for-the-badge for a larger, rounded style. |
|
| Logo Color: Black | &logoColor=black |
Use black for logos on light backgrounds. |
|
| Text on Right Side | https://img.shields.io/badge/<LEFT_TEXT>-<RIGHT_TEXT>-<COLOR> |
Ensure <COLOR> is a valid hex code or color name. |
|
| OpenSearch Badge | https://img.shields.io/badge/OpenSearch-00BFB3?style=for-the-badge&logo=opensearch&logoColor=white |
Use official brand colors for consistency (e.g., 00BFB3 for OpenSearch). |