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 that updates automatically as 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. The internet as a whole produces around 2–4% of global CO₂ emissions — comparable to the aviation industry. 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 — fetches the most recent scan result and renders it in real time. If you ship a new feature that adds 200 KB of unoptimised JavaScript, the badge reflects that regression at the next scheduled scan. 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.

I watched this play out with a nonprofit that added a Grade A badge to their homepage. Within two months, several of their largest donors had mentioned it unprompted in correspondence — not because the donors were carbon accounting experts, but because the specificity of the claim ("0.08g CO₂ per pageview") stood out against every other organisation's generic pledges. 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.

A Shopify store I worked with went from Grade D to Grade A after a focused performance optimisation sprint — compressed images, eliminated three unused JavaScript libraries, and migrated to a green-certified CDN. They added the badge to their product pages within a week of hitting Grade A. Their conversion rate on those pages increased by 4.3% over the following 90 days. I cannot attribute all of that to the badge, but the directional signal is consistent with what I have heard from other teams who have done the same.

3. CSRD Compliance and ESG Reporting Pressure

The EU's Corporate Sustainability Reporting Directive (CSRD) requires large companies to report on their environmental footprint starting from 2024, with the scope widening to mid-sized companies by 2026. Digital emissions fall under Scope 3 — the indirect emissions from value chain activities — and regulators and auditors are beginning to ask about them specifically.

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 scans your site monthly, assigns a grade, and produces 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. At scale — Carbon Badge has issued badges for tens of thousands of sites — this creates a network of earned links across a wide range of domains and industries.

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 world average grid carbon intensity from Ember Climate's 2023 data. If your host is verified as renewable by the Green Web Foundation, a green_factor of 0.243 applies — a 24.3% automatic reduction in the calculated emissions.

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 (typically under 3 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.

Dynamic badges are served from Carbon Badge's CDN with a short cache TTL. Each time a page loads and the browser requests the badge SVG, it gets the most recent scan result. 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, the Pro plan includes API access to retrieve scan results programmatically.

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 fetches current data on each page load. Carbon Badge operates this way by default. When a visitor's browser loads your page and requests the badge SVG, it gets the result of the most recent scheduled scan — monthly on the free plan, weekly on Pro. The badge always reflects reality within its scan cadence. If your site regresses, the badge shows it. If you optimise, the badge shows that too.

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 Customisation Options

Carbon Badge generates badges in several configurations to fit different site designs:

• Size variants: Small (120×40px footprint equivalent), Medium (200×60px), and Large (300×90px) — all in SVG so they render crisply at any actual screen resolution.
• Style variants: The default uses Carbon Badge's colour scheme (green for A/B grades, yellow for C, orange for D/E, red for F). A monochrome variant is available for sites where colour clashes with the design. A minimal variant shows only the grade letter and gram figure with no background fill.
• Theme: Light and dark versions to match your site's background colour.
• Language: Pro plan users can configure the badge label language (English, French, German, Spanish, and others) for international audiences.

If none of the presets fit, the API response on Pro plans gives you raw data — grade, grams, green hosting boolean, scan date — so you can render your own badge implementation in whatever format your design system requires.

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.

Carbon Badge has issued badges for sites collectively across the full spectrum of the web. The methodology is consistent 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

If you want a static badge only, you can generate one from any scan result at no cost. If you want a dynamic badge that updates automatically — which is what actually makes the commitment meaningful — you need an account. The free plan covers monitoring for up to 3 URLs with monthly scans and dynamic badge embed. The Pro plan at €9/month adds unlimited URLs, weekly scans, API access, and multi-language badge support.

For most independent sites and small studios, the free plan is sufficient. For agencies managing multiple client sites, or for companies that want weekly scan cadence to catch regressions before they ship, Pro is the right tier.

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 by 40–60% on image-heavy pages. That change alone moves most D-grade sites to B or C.

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 a typical 2024 WordPress or Shopify site, that figure is 40–60% of total JS weight. Removing or deferring unused scripts is the highest-effort change but often the most impactful after images.

Switching to a green-certified host applies a 24.3% reduction in the SWDM formula 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.