Browser Compatibility Badges
Add dynamic SVG badges to your README files to verify that your code works with the latest browser versions. Perfect for ensuring compatibility up to a maximum browser version using semantic versioning.
Maximum Version Check
Verify your code works up to the latest browser versions
Always Up-to-Date
Badges reflect current browser versions automatically
Flexible Versioning
Support for <=, <, >=, >, ^, ~, = operators
GitHub Integration
Embed directly in markdown - no setup required
Quick Start
Add a badge to your README to verify your code is compatible with the latest browser versions. Most developers want to check maximum version compatibility to ensure their code works with current browsers.
Multi-Browser Maximum Version Check
Semantic Versioning Reference
Our badge API supports standard semantic versioning operators. Most common use case: Use <= or < to verify your code works up to a maximum browser version.
| Operator | Description | Example | Common Use Case |
|---|---|---|---|
<= | Less than or equal to (maximum version) | <=135.0.0 | Works up to Chrome 135 (most common) |
< | Less than (below version) | <136.0.0 | Works below Chrome 136 |
>= | Greater than or equal to (minimum version) | >=130.0.0 | Requires Chrome 130 or newer |
> | Greater than | >130.0.0 | Requires above Chrome 130 |
^ | Compatible with (same major version) | ^130.0.0 | Chrome 130.x.x range |
~ | Approximately equivalent (same minor) | ~130.5.0 | Chrome 130.5.x range |
= | Exactly equal to | =130.0.6723 | Exact version match |
<= with the highest version you've tested to show "tested up to Chrome X". This is the most practical approach for documenting browser compatibility.Interactive Badge Generator
Configure your badge requirements and get ready-to-use markdown:
Common Use Cases
Here are some real-world examples of how to use browser compatibility badges:
Single Browser Compatibility
Verify your web application works up to Chrome 135
Use Case: Perfect for Chrome-specific projects or extensions
Multi-Browser Support
Show compatibility across supported major browsers
Use Case: Ideal for cross-browser web applications and libraries
Minimum Version Requirement
Ensure users have at least Chrome 130 for modern features
Use Case: For projects requiring specific browser capabilities
Shields.io Integration
Already using shields.io? You can use our endpoint badge API with shields.io for consistent badge styling across your README.
How It Works
We provide a /api/shields endpoint that returns JSON in shields.io's endpoint badge format. Shields.io fetches this JSON and renders the badge for you.
Multi-Browser Example
<= need double-encoding.<= → %3C%3D → %253C%253D (double-encoded for shields.io)Customize with Shields.io Options
Add shields.io query parameters to customize the badge appearance:
| Parameter | Options | Description |
|---|---|---|
style | flat, flat-square, plastic, for-the-badge, social | Badge style |
logo | googlechrome, firefox, microsoftedge, safari, opera | Add browser logo |
logoColor | Any color (e.g., white, #fff) | Logo color |
label | Any text | Override left-side text |