Global Araç
Github Badge Generator
Önizleme
Markdown (README.md)
HTML
<img src="https://img.shields.io/badge/build-passing-brightgreen?style=flat-square" alt="build: passing" />Görsel URL'si
https://img.shields.io/badge/build-passing-brightgreen?style=flat-squareGenerates badges via shields.io — same service used in most popular OSS READMEs. Free, no rate limits for low-volume use. For dynamic badges (live build status, version from package.json), use shields.io endpoint URLs directly.
Generate shields.io-style badges for your GitHub README, documentation, blog posts, or any web page. Customize label (left side), message (right side), color, style (flat / flat-square / for-the-badge / plastic / social), and an optional link target. Live preview; outputs Markdown, HTML, and raw image URL formats.
Shields.io is the de facto standard for project badges since around 2014 — billions of badge requests served per month. The format started as a way to show CI status, npm version, and license at a glance on GitHub READMEs, and grew into the universal mini-info graphic for tech projects. Most popular open-source projects have a row of badges at the top of their README: version, build status, license, downloads, code coverage, contributors, etc.
Two badge types: static (the badge shows fixed text — version 1.2.3, license MIT) — what this tool generates; and dynamic (the badge fetches real-time data from a service — current package version, current build status, current download count). Dynamic badges use shields.io endpoint URLs that look likeimg.shields.io/npm/v/<package> and shields.io fetches the data on each render. For dynamic badges, use shields.io directly; this tool is for static custom badges.
Common static-badge use cases: project status (active / maintenance-mode / abandoned), technology stack (built with Next.js, hosted on Vercel), support status (Discord channel, Patreon, sponsor link), certifications (HIPAA-ready, SOC2-compliant), blog post tags (date, reading time, category).
Nasıl Kullanılır
- Enter the label (left text). Common conventions: 'license', 'build', 'version', 'docs', 'discord'.
- Enter the message (right text). The actual value: 'MIT', 'passing', 'v1.2.3', 'available', 'join'.
- Pick a color. Standard semantic colors: brightgreen (success), green, yellow, orange, red, blue, lightgrey. Or pick a brand hex.
- Pick a style: flat (default, modern), flat-square (sharper edges), for-the-badge (uppercase, large), social (gradient + icon, retro), plastic (gradient classic).
- Optional: add a link URL — the badge becomes clickable.
- Copy the Markdown for README files, HTML for web pages, or raw image URL for embedding elsewhere.
Ne Zaman Kullanılır
- Adding a row of status badges to a GitHub README.
- Documenting a project's tech stack or compliance status.
- Adding clickable links (Discord, sponsor, support) to a project landing page.
- Marking blog posts with publication date, reading time, or category.
Ne Zaman Kullanılmaz
- Dynamic data badges (live npm version, CI status, download count) — use shields.io endpoint URLs directly. shields.io has hundreds of pre-built integrations.
- Brand-critical badges where you need pixel-perfect design control — design custom SVG badges instead.
- Badges with complex layouts (icon + multiple data points) — shields.io is single-row label-message format only.
Yaygın Kullanım Senaryoları
- Quick generation during a typical workday
- Pre-decision sanity-check on inputs and outputs
- Educational use — demonstrating the underlying concept
- Onboarding a colleague who needs the same calculation/conversion
Sık Sorulan Sorular
Are dynamic badges supported?
Not from this tool — use shields.io endpoint URLs directly for dynamic data: version from package.json (img.shields.io/npm/v/PACKAGE), build status from GitHub Actions (img.shields.io/github/actions/workflow/status/USER/REPO/WORKFLOW), npm downloads (img.shields.io/npm/dm/PACKAGE), etc. shields.io has comprehensive docs covering hundreds of integrations.
What's the right number of badges?
3-5 for most projects. More than 7 starts to look like decoration rather than information. Pick the badges that matter for new visitors trying to assess: license, current version, build status, primary download/contribution stat. Skip the social/sponsor badges unless they're meaningful (some projects use them as primary calls-to-action).
How do I make a badge clickable?
Wrap in a link in your Markdown: `[](link.com)`. The tool generates this format if you provide a link URL. In raw HTML: `<a href="..."><img src="..." alt="label"></a>`.
What's the right color?
Convention: green/brightgreen for 'good' (passing, current, available), yellow/orange for 'warning' or 'old', red for 'bad' (failing, deprecated), blue for neutral / informational, lightgrey for 'misc'. Brand-color badges (a Discord badge in Discord's purple) often use the brand's primary color regardless of these conventions.
Will the badge work everywhere?
Yes for any place rendering Markdown or HTML with image support. GitHub README, GitLab README, Bitbucket, Notion, Substack, blog posts, documentation sites — universal. The badge image is hosted on shields.io's CDN; their uptime is very good but not 100% (rare brief outages happen). For mission-critical badges, consider a self-hosted alternative like badgen.net.
What's the difference between flat, flat-square, and for-the-badge?
Flat (default): rounded corners, modern, slightly subtle. Flat-square: sharper corners, blockier, slightly more industrial. For-the-badge: uppercase text, larger size, more attention-grabbing — useful when the badge is a primary CTA. Plastic: gradient fill, classic shields.io look, slightly retro. Social: gradient background with optional icon, designed for follow/star/sponsor buttons.