NPM-Badge-Leitfaden: Jede Badge-Art erklärt (Downloads, Version, Lizenz, mehr)

Umfassende Referenz für jede NPM-Badge-Art im Jahr 2026. Downloads, Version, Lizenz, letzte Veröffentlichung, Bundle-Größe, Abhängigkeiten. Codebeispiele und Best Practices für jede Art.

An npm badge is a small status pill displayed on a project's README or website that shows live metadata about an npm package — total downloads, current version, license type, dependency count, or bundle size. Used well, npm badges give visitors a one-glance sense of how active, modern, and trustworthy a package is.

This guide covers every common npm badge type in 2026, with code snippets for both shields.io (the canonical markdown badge service) and FeedPulse (a themable website-friendly alternative). If you just want the downloads badge for your website, the free npm downloads badge customizer is the fastest path.

Why npm badges matter

A modern open-source package's README is the first thing developers see when evaluating it. Within 10 seconds, they scan the badges row to answer four questions:

Is this maintained? (last-publish date, version)
Is anyone using it? (downloads)
What are the legal terms? (license)
Will it bloat my bundle? (size)

Without npm badges, all four answers require navigating elsewhere — to npmjs.com, to GitHub commits, to a license file. Badges put the answers in the developer's eyeline immediately.

For a package's marketing landing page, the same badges serve a slightly different purpose: they're social proof that the project is real, current, and credible.

The 8 most useful npm badge types

1. Downloads badge

The single most important npm badge — shows weekly, monthly, or all-time downloads.

![NPM downloads](https://img.shields.io/npm/dw/PACKAGE_NAME?style=for-the-badge)

For a themable website version:

<script async src="https://feed-pulse.com/api/npm_downloads?pkg=PACKAGE_NAME"></script>

See /free-npm-downloads-badge for the customizer.

2. Version badge

Shows the latest published version on npm.

![NPM version](https://img.shields.io/npm/v/PACKAGE_NAME)

Auto-updates after every npm publish. The badge for react always shows the current React version.

3. License badge

Shows the package's license type (MIT, Apache-2.0, GPL-3.0, etc.).

![License](https://img.shields.io/npm/l/PACKAGE_NAME)

Critical for visitors evaluating commercial use. A missing license badge or a copyleft (GPL) license warns enterprise users to look elsewhere; an MIT badge invites them to use the package freely.

4. Last-publish badge

Shows how recently the package was updated.

![Last commit](https://img.shields.io/github/last-commit/OWNER/REPO)

(Technically a GitHub badge for the repo, since npm doesn't expose last-publish directly via shields.io. The repo last-commit is a close proxy.)

A package not updated in 12+ months is a yellow flag. 24+ months is red.

5. Bundle size badge

Via bundlephobia.com — shows the gzipped + minified size of the package.

![Bundle size](https://img.shields.io/bundlephobia/minzip/PACKAGE_NAME)

A 50KB+ utility library is suspicious. A 5KB one is delightful. Bundle size is a major sort criterion in 2026.

6. Type definitions badge

Shows whether the package has TypeScript type definitions included or available via DefinitelyTyped.

![Types](https://img.shields.io/npm/types/PACKAGE_NAME)

Modern JS developers strongly prefer typed packages. A "types: included" badge is a meaningful purchase signal.

7. Dependency count badge

Shows the number of runtime dependencies the package pulls in.

![Dependencies](https://img.shields.io/librariesio/release/npm/PACKAGE_NAME)

Zero-dependency utility packages are increasingly preferred. A package with 47 transitive dependencies is a security surface area concern.

8. Code coverage badge

Via Codecov or Coveralls — shows test coverage percentage.

![Coverage](https://img.shields.io/codecov/c/github/OWNER/REPO)

For library packages where reliability matters, displaying ≥80% coverage is a strong credibility signal.

Where to display npm badges

GitHub README

The canonical location. Place the badge row directly under the H1 title.

# my-cool-package

![NPM version](https://img.shields.io/npm/v/my-cool-package)
![NPM downloads](https://img.shields.io/npm/dw/my-cool-package)
![License](https://img.shields.io/npm/l/my-cool-package)
![Bundle size](https://img.shields.io/bundlephobia/minzip/my-cool-package)

A short description here.

Package landing page (website)

Same set of badges, but rendered through a script-tag widget for theming and live updates without page reloads.

Documentation sites (Docusaurus, MkDocs, GitBook)

Badge components placed in the docs sidebar or in the welcome page hero.

Newsletter signatures + blog posts

A small downloads count near your bio adds credibility when you're writing about that package's domain.

How many badges should a project show?

Honest rule of thumb: 4-6 badges in the README header, 2-3 badges on the marketing landing page.

README: 4-6 is the sweet spot. Downloads, version, license, types, and one wildcard (coverage or bundle size). More than 6 starts looking like badge collecting rather than communicating.
Marketing landing: 2-3 is plenty. Downloads is mandatory (proof). Stars or last-published as the second. Don't clutter a landing with the same density of badges as a README — landings serve different visitor intent.

Common mistakes with npm badges

Adding every available badge. A wall of 12 badges signals insecurity, not credibility. Each badge should answer a question your visitor is actually asking.
Static badge text instead of live badges. "1M+ downloads" written as plain text gets stale. Use a live badge — it'll always be current.
Badges that don't link anywhere. A clickable badge is a UX win. Click the downloads badge → arrive at the npm package page. Click the GitHub stars badge → arrive at the repo's stargazers list.
Inconsistent badge styles. Mixing shields.io flat with badgen for-the-badge styles looks unintentional. Pick one style system per surface.
Showing license badge but not bundle size. Most developers care more about bundle size than license (assuming MIT or Apache). The license badge isn't useless, but it's lower-leverage than size.

Frequently asked questions

What's the difference between an npm badge and a GitHub badge?

NPM badges show data from the npm registry — versions, downloads, license metadata. GitHub badges show data from the GitHub repo — stars, last commit, contributors, issues. Most projects display both kinds in their README.

How often do npm download badges update?

Shields.io caches npm download data for ~12 hours. FeedPulse caches for 1 hour. Both pull from npm's public download stats API, which itself updates daily for the prior day's data.

Why does my npm downloads badge show "no data"?

Two common causes: (1) the package name is misspelled in the badge URL, or (2) the package was published less than 24 hours ago and npm hasn't aggregated download stats yet. Wait 24-48 hours after first publish.

Can I use npm badges for private packages?

Generally no — public badge services only work for public npm packages. For private/scoped packages, you'd need a custom badge renderer with authentication to your private registry.

What's the best npm badge for a brand-new package with no downloads?

Skip the downloads badge entirely until you have meaningful numbers (say, >50/week). Lead with version, license, and types badges instead — those make sense at any download level. The downloads badge can come later as the package grows.

Are npm badges hurting my README's loading speed?

Each badge is a small SVG (~1-3KB). 6 badges add ~10KB total — negligible. Modern markdown renderers (GitHub, GitLab) load them async. There's no meaningful perf impact.

Add live npm badges to your site

If you want a live, themable npm downloads badge for your package's website or documentation, open feed-pulse.com/free-npm-downloads-badge, enter your package name, pick a theme, copy the snippet. For a complete open-source dev social-proof set, pair with the GitHub stars badge and Discord members widget.