1. The Anatomy of a Shields.io Static Badge
The standard URL format for a static badge is:
https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>
For tech stack badges where you only want the technology name, you omit the label and provide just message and color:
https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white
2. Critical URL Encoding & Hex Rules
The Hash Symbol Trap:
Never include the # character in hex codes in the URL path (e.g. #3178C6). In HTTP URLs, # denotes an anchor fragment; the web browser strips everything after it, causing Shields.io to return an error. Always omit the hash (3178C6).
Character Escaping Rules:
- Space: Use an underscore
_(e.g.Next.js_15) or%20. - Dash (Hyphen): Use a double dash
--(e.g.C--Sharprenders asC-Sharp). - Underscore: Use a double underscore
__.
3. Official Brand Hex Codes & Simple Icons Slugs
Here is a verified reference list of official brand colors, hex codes, and corresponding Simple Icons slugs for clean badge generation:
| Technology | Brand Hex | Logo Slug | Recommended logoColor |
|---|---|---|---|
| TypeScript | 3178C6 | typescript | white |
| Python | 3776AB | python | white |
| Rust | 000000 | rust | white |
| Go (Golang) | 00ADD8 | go | white |
| React | 20232A | react | 61DAFB |
| Next.js | 000000 | next.js | white |
| Tailwind CSS | 38B2AC | tailwind-css | white |
| PostgreSQL | 4169E1 | postgresql | white |
| Redis | DC382D | redis | white |
| Docker | 2496ED | docker | white |
| Kubernetes | 326CE5 | kubernetes | white |
4. Customizing Style & Label Colors
Shields.io supports five visual styles via the style parameter:
style=for-the-badge: Prominent uppercase block badges. Highly popular for developer skill overviews.style=flat-square: Modern flat rectangular badges without rounded pill corners.style=flat: Default pill-style rounded badges.style=plastic: Retro glossy gradient badges.
To color the left label independently from the right value, use labelColor:
https://img.shields.io/badge/Status-Active-success?labelColor=1e293b&style=flat-square
Generate Badges Instantly with ProfileCrest
Skip manual hex typing. ProfileCrest includes hundreds of curated badges with official brand colors and instant markdown copy.
🚀 Launch ProfileCrest Generator