shieldcn
Docs
Studio
Showcase
Pricing
Sponsor
jal-co/shieldcn552
shieldcn

Member of the Vercel OSS Program

Analytics provided by OpenPanel

Monitored by Sentry

Powered by Neon.

Community

GitHubjal-co/uiStatsllms.txtPrivacyContact

Product

DocumentationAPI ReferenceToken PoolGeneratorAgent Skill

inspired by shields.io and badgen.net

Made with in by Justin Levine

shieldcn
Docs
Studio
Showcase
Pricing
Sponsor
jal-co/shieldcn552

Search documentation

Search all badge providers, guides, and reference docs.

Getting Started

IntroductionREADME StudioCLIAgent SkillNewSelf-HostingAPI ReferenceToken PoolSponsor

Badges

Badge GroupStatic BadgeDynamic JSONHTTPS Endpoint

Charts

Overview

Headers

OverviewGenerator

Sponsors

OverviewGenerator

Contributors

OverviewGenerator
shieldcn

Member of the Vercel OSS Program

Analytics provided by OpenPanel

Monitored by Sentry

Powered by Neon.

Community

GitHubjal-co/uiStatsllms.txtPrivacyContact

Product

DocumentationAPI ReferenceToken PoolGeneratorAgent Skill

inspired by shields.io and badgen.net

Made with in by Justin Levine

Hosted assets

Host your brand's logos and fonts at stable shieldcn URLs. Swap the asset once and every badge, header, and embed that uses it updates on the next fetch.

A Plus brand owns hosted assets — logos and fonts served from stable URLs. This is the rebrand wedge: distribute the URL once, swap the bytes later, and every embed updates.

Logos

A brand can host up to four image assets:

KindURLUse
logo-light/b/{slug}/logo-light.svgDark-ink logo, for light backgrounds
logo-dark/b/{slug}/logo-dark.svgLight-ink logo, for dark backgrounds
mark/b/{slug}/mark.svgSquare icon / app mark
wordmark/b/{slug}/wordmark.svgFull wordmark

Each is also available as .png. Upload them in the brand editor, or let the Import from a domain flow fetch and host them for you.

Using a hosted logo in a badge

Set logo=brand on any ?brand= badge and shieldcn substitutes the mode-appropriate hosted logo automatically:

<!-- Dark badge → uses logo-dark; ?mode=light → uses logo-light -->
![build](https://shieldcn.dev/github/acme/app/ci.svg?brand=acme&logo=brand)

The same works on README headers:

![header](https://shieldcn.dev/header/banner/Acme.svg?brand=acme&logo=brand)

Embedding a logo directly

You can also reference the hosted URL as a plain image — handy for a docs site header or an npm README:

<img src="https://shieldcn.dev/b/acme/logo-dark.svg" alt="Acme" height="32" />

Swap the stored logo in the dashboard and this image updates everywhere on the next fetch.

Fonts

Upload a brand's typefaces (TTF, OTF, WOFF, or WOFF2) to render badges in the brand's own font:

SlotBadge paramUse
font-sansfont=brandBody / default
font-monofont=brand-monoMonospace
font-headingfont=brand-headingDisplay / headings
![v](https://shieldcn.dev/npm/acme-ui.svg?brand=acme&font=brand)

Fonts render only for brands that have uploaded one; otherwise the badge falls back to Inter for full glyph coverage.

Caching & propagation

Hosted assets are served with a short cache TTL, so replacing an asset propagates across GitHub's Camo proxy within minutes. Assets are capped at 2 MB each — logos and fonts are small, and this keeps serving fast.

Prefer SVG logos: they scale crisply at any badge height and are the format the badge renderer inlines directly.

On This Page

LogosUsing a hosted logo in a badgeEmbedding a logo directlyFontsCaching & propagation