The Complete Guide to Website Carbon Badges

A website carbon badge is a small visual indicator — usually displayed in a site's footer or header — that shows how much CO₂ your website emits per pageview. It is the digital equivalent of an energy efficiency label: a quick, honest signal that tells visitors exactly where your site stands on the environmental scale. The grade runs from A (under 0.15g CO₂ per pageview) down to F (over 1.00g), and displaying it publicly is one of the most concrete actions a web team can take toward genuine digital transparency.

I helped build Carbon Badge partly because I was frustrated by how easy it was to make green claims without any verifiable basis. A badge changes that. It is a public commitment to a number — one that anyone can verify, and one you can keep current with a quick rescan whenever your site changes. That accountability is what makes it different from a sustainability page full of aspirational language.

This guide covers everything: what a carbon badge actually is, why displaying one matters more than most teams realise, how the calculation works, what types of badges exist, and how to get one on your site in the next few minutes using the Carbon Badge scanner.

What Is a Website Carbon Badge?

At its core, a website carbon badge is an SVG or image element that renders a grade and a CO₂ figure — something like "Grade A — 0.09g CO₂ per view" — and links to a detailed report about your site's environmental footprint. The data behind it comes from scanning your page, measuring the weight of every asset transferred, and running those numbers through an established carbon estimation formula.

The concept emerged from the growing recognition that the internet is not carbon-neutral infrastructure. Data centres, network equipment, and the billions of end-user devices loading pages every second all consume electricity, most of which still comes from fossil fuels. A 2021 peer-reviewed study in Patterns put the ICT sector at roughly 2.1–3.9% of global greenhouse gas emissions. Every website is a small piece of that. A carbon badge makes your piece visible.

What distinguishes a good carbon badge from a decorative label is live data. A static badge showing your score from the day you installed it is honest exactly once. A dynamic badge — like the one Carbon Badge generates — always reflects the most recent scan stored for your domain, not a frozen snapshot. If you ship a new feature that adds 200 KB of unoptimised JavaScript and then rescan, the badge updates to show that regression. That feedback loop is the point.

If you want to understand the underlying methodology before going further, the introduction to website carbon footprints covers how grams of CO₂ per pageview are derived from page weight, energy intensity, and grid carbon figures.

Why Display a Carbon Badge? Five Reasons That Actually Matter

1. Transparency Builds Trust in a Greenwashing Era

The bar for environmental claims is getting higher. Users have become accustomed to vague sustainability statements, and a significant proportion of them are now actively skeptical. A badge backed by a live scan and a published methodology (SWDM v4, in Carbon Badge's case) is different. It is a number, not a narrative. It says: here is exactly how clean this page is, here is how we measured it, and you can verify it yourself.

Imagine a nonprofit that adds a Grade A badge to its homepage. It would not be surprising if a donor brought it up directly — not because donors are carbon accounting experts, but because a specific number ("0.08g CO₂ per pageview") stands out against the generic pledges every other organisation makes. Specific numbers communicate credibility. Vague commitments do not.

2. Competitive Differentiation — The Market Is Still Wide Open

Right now, a vanishingly small percentage of websites display a carbon badge. If your site is in a space where buyers are increasingly asking about ESG credentials — B2B SaaS, professional services, public sector procurement, e-commerce brands with sustainability positioning — being among the first movers costs essentially nothing and creates a visible differentiator that competitors would have to copy, not undercut.

There is a sensible order of operations here. Fix the page weight first — compress images, drop the JavaScript libraries nobody uses, check whether your host runs on verified renewable energy — and only then put the badge on the page. A badge that shows a grade you have worked for tells a better story than one that advertises a D.

3. CSRD Compliance and ESG Reporting Pressure

The EU's Corporate Sustainability Reporting Directive (CSRD) started with the largest companies for financial year 2024. Its later waves were postponed by the 2025 "stop-the-clock" Directive (EU) 2025/794, and the scope is still being reworked under the Omnibus simplification package, so check the current text before you plan around a date. Whatever the final perimeter, digital emissions largely sit in Scope 3 — the indirect emissions from your value chain, including the cloud and hosting services you buy — which is exactly where companies tend to have the least data.

A website carbon badge is not a CSRD compliance document on its own, but it is a concrete, auditable data point that supports sustainability reporting. Having a tool that lets you rescan your site regularly, assign a grade, and produce consistent numbers over time gives your sustainability team something real to work with. The alternative — trying to estimate digital emissions retroactively from infrastructure invoices — is far less credible.

4. Each Badge Is a Backlink

This is the mechanic that most teams overlook: every website carbon badge embeds a link back to the tool that generated it. Carbon Badge badges link to carbon-badge.com with your site's URL as a parameter. That means every site displaying a badge is, in effect, a natural backlink from their domain. Every site that displays a linked badge adds one more earned link from its own domain.

For the site displaying the badge, the benefit is different but real: you are demonstrating engagement with a live third-party verification tool, which adds social proof to your environmental claim in a way that a self-authored sustainability page cannot replicate.

5. Internal Accountability

A public badge creates internal pressure to keep the score honest. Development teams that know a Grade B badge is visible on the homepage tend to think twice before shipping an unoptimised hero video or pulling in an additional analytics library. The badge acts as a standing commitment that has to be maintained — not just a one-time effort. That is a different kind of engineering culture, and it is a good one.

How Carbon Badges Work: Scan, Calculate, Generate, Embed

The pipeline from URL to badge involves four steps:

Step 1 — Scan

When you submit a URL to the Carbon Badge scanner, the tool fetches your page using a headless browser — the same way a real user would load it. It captures the total weight of every resource transferred: HTML, CSS, JavaScript, images, fonts, API responses, third-party embeds. Everything that crosses the wire is counted. The result is a single number: total bytes transferred for that page load.

Step 2 — Calculate via SWDM v4

That byte figure is fed into the Sustainable Web Design Model v4 formula:

CO₂ (g) = page_weight_GB × 0.194 kWh/GB × 494 gCO₂/kWh × (1 − green_factor)

The 0.194 kWh/GB figure represents the combined energy intensity of data centres (0.055), network transmission (0.059), and end-user devices (0.080). The 494 gCO₂/kWh is the global average grid carbon intensity used by SWDM v4. On top of the SWDM formula itself, Carbon Badge applies its own additional adjustment: if your host is verified as renewable by the Green Web Foundation, a green_factor of 0.243 reduces the calculated emissions by 24.3%. That reduction is Carbon Badge's implementation choice, not part of the official SWDM v4 specification.

The result is a gram figure. That figure is then placed into the grade scale:

Step 3 — Generate the Badge SVG

Once the grade and gram figure are known, Carbon Badge generates an SVG badge. SVG is the right format here for several reasons: it is tiny (about 1.5 KB), scales cleanly to any resolution, contains no dependencies, and can be cached aggressively. The badge includes the grade letter, the gram figure, and a link to the full report.

Carbon Badge's badge endpoint serves the SVG with a 24-hour Cache-Control header. Each time that cache expires and the browser re-requests the badge, it gets the most recent scan result stored for that domain. There is no JavaScript required — it is a plain image embed. For sites that want the data integrated into their own UI rather than an external SVG, API access is available on the Pro and Enterprise plans.

Step 4 — Embed

The embed code is a single HTML snippet — typically an anchor tag wrapping an image tag, or an inline SVG if you prefer full control over styling. It goes wherever you want the badge to appear: footer, about page, header bar, sustainability landing page. The whole process from scan to embed takes under five minutes for most sites. The detailed walkthrough is in the embedding guide.

Static vs Dynamic Badges: Why the Difference Matters

Not all carbon badges work the same way. The distinction between static and dynamic badges is fundamental, and it is worth understanding before you choose a tool.

A static badge is generated once at a specific point in time. The most common example is the badge from Website Carbon Calculator (websitecarbon.com) — you scan your site, you get a badge image, you embed it. That badge will show your score from the day you generated it until the heat death of the universe, regardless of what happens to your site. Ship a heavy redesign next quarter? The badge still says Grade A from three months ago. That is not transparency. That is a snapshot presented as a live truth.

A dynamic badge shows the result of your most recent scan rather than a fixed snapshot. Carbon Badge operates this way: every time the cached SVG expires and gets re-requested, it reflects whatever your last scan found. You control the cadence by rescanning from your dashboard — paid plans also include monitoring alerts, monthly (Starter), weekly (Pro) or daily (Enterprise). If your site regresses, the next scan shows it. If you optimise, the next scan shows that too. The badge embed itself is a Starter-and-up feature — the free plan is scan-only.

The practical implication: a dynamic badge is a living commitment, not a historical trophy. That is a higher bar to maintain, which is exactly the point.

Badge Design and Sizing

Carbon Badge ships one badge design: a dark background, 200×56px, with the grade colour and a leaf icon that turns green when the host is verified renewable. There is no light theme, no size presets, and no monochrome or minimal variant to pick from — what you see on the scan report is what you embed.

Since it is an SVG, you can still resize it freely with standard width/height attributes or CSS, and it will stay sharp. If you need the badge to match your own brand colours exactly rather than Carbon Badge's palette, that is available as a white-label option on the Enterprise plan.

If you want the underlying data rather than the rendered SVG — to build your own visual treatment, for instance — API access is available on the Pro and Enterprise plans.

Who Is Already Displaying Carbon Badges?

The adoption of website carbon badges has grown significantly as digital sustainability has moved from fringe concern to mainstream ESG consideration. The organisations displaying them are more varied than you might expect:

Digital agencies and freelancers use them as proof of craft. A studio that designs fast, clean, accessible websites and displays a Grade A badge is demonstrating competence, not just claiming it. Clients paying for good work can see the result independently.

SaaS companies, particularly those in the developer tools and productivity space, have adopted badges as part of their broader engineering transparency — the same culture that publishes public status pages and open-sources infrastructure components.

NGOs and nonprofits find them particularly resonant. Organisations whose mission includes environmental responsibility face an implicit obligation to practice what they preach. A charity running a Grade F website while fundraising for climate causes is a contradiction that a carbon badge makes visible.

E-commerce brands with sustainability positioning — sustainable fashion, ethical consumer goods, organic food — are increasingly expected to demonstrate, not just declare, their environmental commitments. A carbon badge on the homepage is a concrete signal that extends to the digital experience, not just the physical product.

The methodology is the same whether you are a solo blogger or a mid-market SaaS. The grade is determined by what your page weighs, not by who you are.

How to Get Your Badge: A Practical Walkthrough

Getting a badge takes three steps:

1. Scan Your Site

Go to the Carbon Badge scanner and enter your URL. The scan runs in about 10–20 seconds. You will see your page weight, your CO₂ per pageview, your grade, and whether your host is verified as using renewable energy. No account required for this step.

Run the scan on your most-trafficked pages, not just your homepage. A homepage that weighs 200 KB and earns a Grade A is great — but if your product pages load 3 MB of unoptimised imagery and score Grade F, that is where your users actually spend time. Scan what matters.

2. Choose a Plan

Scanning is free, and you can do it without an account — but the free plan does not include a badge embed, only the scan itself (one page per scan, up to three scans a day). To embed the badge, you need the Starter plan ($19/month), which covers one site and sends monthly monitoring alerts. Pro ($49/month) covers up to 10 sites, sends weekly alerts, and adds API access. Enterprise ($99/month) covers unlimited sites, sends daily alerts, and includes a white-label badge.

Starter is the right fit for a single independent site. Pro makes more sense for agencies managing several client sites, or anyone who wants a tighter monitoring cadence.

3. Embed the Code

Once your site is registered and scanned, you get an embed snippet — a few lines of HTML. Paste it into your footer template, your CMS's footer widget, or wherever you want the badge to appear. Save, deploy, done. The badge renders immediately, pulling the latest scan result.

The full step-by-step with screenshots for WordPress, Webflow, Squarespace, and raw HTML is in the embedding guide. If you run into issues with content security policy headers blocking the SVG request, the embedding guide covers that specific case too.

What to Do If Your Grade Is Bad

A Grade D or F scan result is not a reason to delay. It is a diagnosis. The remedies are well understood and the impact is often dramatic.

The single biggest lever for most sites is images. Converting unoptimised JPEG uploads to WebP, adding loading="lazy" to below-the-fold images, and implementing responsive srcset attributes can cut page weight substantially on image-heavy pages, and it is usually the single biggest grade improvement available.

The second lever is JavaScript. Run Chrome DevTools' Coverage tab on your key pages and identify how much of your loaded JavaScript is never executed. On plugin-heavy WordPress or Shopify sites, the unused share is often large. Removing or deferring unused scripts is the highest-effort change but often the most impactful after images.

Switching to a green-certified host gets you Carbon Badge's 24.3% green-hosting reduction with zero changes to your code. It is the cheapest per-hour gain on the list.

The complete reduction guide covers all of these in detail with specific implementation instructions. The tool comparison is useful if you want to understand how Carbon Badge's methodology relates to other scanners you may already use.

The goal is not to get a good badge so you can display it and forget about it. The goal is to build a genuinely lighter site — one that loads faster, costs less to serve, and uses less of the planet's energy to deliver value to users. The badge is accountability infrastructure for that goal.