Paste one tag into your footer. The badge measures what each page actually loaded in the visitor's browser and turns it into grams of CO₂e and a grade. No account, no cookies, no tracking.
npm i @cometweb/carbon-badge
The real badge, measuring this page in your browser right now.
The default badge measures in the visitor's browser and sends nothing anywhere.
10,585 bytes for the embed. A build over 10,700 fails.
When a file hides its size, the badge shows a floor or N/D, never a grade.
Pick the style that fits your footer. The number stays the same: the badge measures once, after the page has finished loading.
Recorded on 7 Nov 2026 in Chromium from the repository's own
test.html, served locally with the production build. Real time,
no speed-up. The labels above the badge were added for the recording.
Every variant keeps the estimate, the measured host and path, the method and the attribution. The minimal variant is transparent, so match its theme to your background.
variant="default"A card with the grade tile.
variant="compact"A smaller strip.
variant="minimal"A transparent footer signature.
theme="light"For light backgrounds.
variant="compact" theme="light"Same data, smaller.
variant="minimal" theme="light"On a white footer.
All six are screenshots of one real local measurement of test.html:
36.1 kB transferred, 0.0054 g CO₂e, which the badge displays as <0.01 g.
Some files, such as third-party scripts, hide their size from the browser. Then the badge shows “at least” a number, or N/D, instead of a grade it cannot back up.
Every resource reported its size. The badge shows grams, the method and a letter.
2 of 2 sizes visible · 36.1 kB
One image came from another origin without Timing-Allow-Origin. The visible part is shown as a floor, and the letter is withheld.
8 of 9 sizes visible · 218.1 kB visible · 0.032 g floor
The URL changed after load, so the first-load timing no longer describes this view. The badge says so and offers a reload.
Also used for missing timing or an overflowed timing buffer
Real captures from Chromium on 7 Nov 2026. For the middle case the test page also loaded the repository's own screenshots plus one image from a second local origin.
The badge multiplies the data your page loaded by a fixed energy figure and the global average grid. Drag the slider to see how page weight changes the grade.
Same formula and bands as the badge's estimate mode.
CO₂e = data_GB × (E_operational + E_embodied) × 494 data_GB = bytes / 1,000,000,000
| Segment | Operational | Embodied |
|---|---|---|
| Data centre | 0.055 | 0.012 |
| Network | 0.059 | 0.013 |
| User device | 0.080 | 0.081 |
| Total, kWh/GB | 0.194 | 0.106 |
0.300 kWh/GB × 494 g/kWh = 148.2 g CO₂e per GB, or about 0.148 g per MB. Factors are pinned in model-factors.json and checked against the reference CO2.js implementation in the test suite. In estimate mode there is no green-hosting discount.
The letters are CometWeb's own fixed bands (carbon-badge-bands-v1),
not the Sustainable Web Design Digital Carbon Rating. Megabyte equivalents assume the
first-load transfer formula.
By default everything happens in the visitor’s browser. If you use CometWeb Insight, the badge can show a result you published there instead. It never starts a scan.
estimatedefault, no setup
snapshotset snapshot-id
GET /api/public/carbon-badge/id/{public_id}.
apiexplicit mode="api"
GET /api/public/carbon-badge. Query and fragment are stripped.
"Published by CometWeb" appears only for a fresh, ready snapshot fetched over the network. It describes where the number came from, not domain ownership or certification.
No account or API key. The script is pinned to one exact version, so the browser refuses a file that was changed.
Put it where the badge should appear, usually the footer.
Use the dark theme on dark backgrounds and pick a smaller variant if you need one.
The embed entry registers the element and loads network code only when needed.
The hash above matches the 2.0.6 file on jsDelivr and on cometweb.io, checked on 7 Nov 2026. WordPress, Shopify, Webflow and Wix steps and self-hosting are in the README.
Open TypeScript under MIT with no dependencies. Every change and every release goes through the same checks: tests, types, size and a security audit.
They cover the estimator, API parsing, caching, route changes and rendering, and they run with a pinned clock.
Chromium, Firefox and WebKit run the built package, including axe checks, 200% zoom, RTL and a strict nonce-based CSP.
A golden matrix generated with @tgwf/co2 0.19.0 pins the
estimator's arithmetic. It proves calculation parity, not physical accuracy.
The initial embed is measured as gzip in CI. The full SDK and the API entry have their own limits.
A release manifest records hashes for every file. CodeQL, dependency review, an SBOM and a package attestation run on GitHub.
CI fails on any moderate or higher advisory. Security reports go to a private email, not public issues.
A footprint number is only useful if you know what it leaves out. These limits are part of the contract, not fine print.
No energy is measured. Bytes go through fixed averages, so two pages of the same weight always get the same grams.
It covers what loaded before the page went quiet. Later lazy loads, return visits and whole sessions are outside the number.
494 g/kWh is a modelled global proxy with no dataset year. There is no regional grid and no confidence range.
It is not an ESG report or a Digital Carbon Rating, and browser byte counts include a small fixed header allowance.
Read the code, check the formula, then paste one tag into your footer.