Was ist Abzeichen- und Button-Maker?

Der Badge-/Button-Maker erstellt individuelle Abzeichen und Schilder mit frei wählbarem Text, Farben und Formen. Lege Label und Wert fest, wähle einen Stil und lade als PNG oder SVG herunter.

Erzeugt Abzeichen im shields.io-Stil (eine farbige Kapsel, geteilt in eine graue Beschriftung und einen farbigen Wert) als inline-SVG. Wähle zwischen flat, flat-square, rounded, pill und for-the-badge; lege Hex-Farben für beide Hälften und eine eigene Textfarbe für Beschriftung und Wert fest; setze ein Technologie-Logo (GitHub, npm, Docker, Python, Node.js und weitere) mit automatisch übernommener Markenfarbe ein; verpacke das Abzeichen in eine klickbare URL; kopiere das Ergebnis als Markdown für ein README, als HTML für eine E-Mail oder Webseite, oder lade es als scharfes SVG oder dreifach skaliertes PNG herunter. Füge mehrere Abzeichen einer Liste hinzu und kopiere alle Markdown-Schnipsel auf einmal oder speichere sie als .md-Datei. Die Breite wächst mit dem Text mit, so dass 'Build / Passing' und 'License / Apache 2.0' ohne manuelles Nachjustieren ausgewogen aussehen.

Anleitung

1. Gib den Badge-Text ein — wähle ein Label (linke Seite) und einen Wert (rechte Seite), z. B. Version und 2.0.
2. Wähle Farben für die Hintergründe von Beschriftung und Wert, entscheide dich für eine Form und füge bei Bedarf links ein Technologie-Logo hinzu.
3. Beobachte, wie sich das Abzeichen live aktualisiert, lade es als PNG oder SVG herunter oder kopiere es als Markdown oder HTML, um es in ein README oder eine Seite einzufügen.

Wann verwenden

• Ein Build-, Versions- oder Coverage-Badge in einer GitHub-README ohne CI-Anbieter hinterlegen.
• Tags wie 'Beta', 'Neu' oder 'Pro' in eine Feature-Zeile oder Preis-Tabelle auf einer Landingpage setzen.
• Einen Tech-Stack-Chip im persönlichen Portfolio oder im PDF-Lebenslauf hervorheben.

Ergebnis

Erstelle ein Projektstatus-Badge: Label "Build" in Grau, Wert "Passing" in Grün, flacher Stil. Du erhältst ein Status-Badge wie auf GitHub-Repos.

Häufige Fragen

Funktionieren die Badges weiter, wenn ich sie als PNG selbst hoste statt shields.io zu nehmen?

Ja. Die heruntergeladenen SVGs und PNGs sind in sich abgeschlossen und rufen keinen Server auf. Der Nachteil gegenüber shields.io: keine Live-Daten — ein 'version 1.2'-Badge bleibt 1.2, bis du es neu generierst.

Was ist der Unterschied zwischen flat, rounded und pill?

Flat hat scharfe 0-px-Ecken mit einem zarten Verlauf, flat-square dieselbe Form ohne Verlauf, rounded einen 4-px-Radius, pill an beiden Enden volle Halbkreise und for-the-badge ist der von READMEs bekannte fette, höhere, durchgängig großgeschriebene Stil. Wähle, was zur umliegenden Oberfläche passt.

Kann ich Markenfarben statt dem voreingestellten Grün-Grau benutzen?

Ja — Label-Farbe, Wert-Farbe und eine eigene Textfarbe für jede Hälfte sind alle als Hex wählbar. Versuch ein dunkles Label mit hellem Text und einem leuchtenden Wert für hohen Kontrast. Die Vorschau aktualisiert sich beim Tippen.

Soll ich SVG oder PNG nehmen?

SVG für GitHub-READMEs, Websites und überall, wo das Badge skaliert wird (bleibt scharf). PNG, wenn du in Umgebungen einfügst, die kein SVG rendern: Word-Dokumente, Slack-Nachrichten oder manche Screenshot-Tools.

Warum ist die PNG-Datei größer als die SVG-Datei?

Das PNG wird in dreifacher Bildschirmgröße gerendert, damit es auf hochauflösenden Displays scharf bleibt. Ein typisches Badge-SVG ist unter 1 KB, das PNG meist 5-15 KB. SVG bei Dateigröße, PNG bei Kompatibilität.

Ähnliche Tools