---
title: "Uptime badge generator for README and site | Logdash"
description: "Live SVG uptime and status badges for a GitHub README or a Tailwind site: classic, status or card style, 24h to 90d uptime, light or dark."
url: https://logdash.io/tools/uptime-badge-generator
---

# Uptime badge generator

The generator turns any Logdash monitor on a published status page into a live SVG badge, in classic, status or card style, and gives you the markdown or HTML to paste into a README or a site.

Markdown 

```markdown
[![Uptime](https://api.logdash.io/public_dashboards/status.logdash.io/badges/AOUzMYzobxKq.svg?style=classic&period=30d)](https://status.logdash.io)
```

HTML 

```html
<a href="https://status.logdash.io"><img src="https://api.logdash.io/public_dashboards/status.logdash.io/badges/AOUzMYzobxKq.svg?style=classic&period=30d" alt="Uptime"></a>
```

An uptime badge is an SVG the Logdash API draws from the same checks as your status page, so the badge and the page never disagree. It is recomputed at most once a minute and served with a 60-second cache. The monitor has to be on a published status page, and the snippets link the badge back to that page. An unpublished page or a monitor that is not on it answers 404\. There is nothing to install: it is an image, so it works anywhere markdown or an img tag does.

## Three uptime badge styles

- Classic. A 20-pixel pill in the shields shape: uptime 30d: 99.95%. The period is 24h, 7d, 30d or 90d. Its colours are fixed, so there is no theme.
- Status. A pill with the monitor name and its state right now: Operational, Degraded, Down or Unknown, with a pulsing dot. Light or dark. No period, because it shows the present.
- Card. A 120-pixel card with the name, the uptime over 90 days and one bar per day from 90 days ago to today. Light or dark.
- Badges carry a small Logdash mark. On Pro, the plan with custom domains, the mark is gone.

## Status badge for a GitHub README

The URL takes three query parameters: `style` (classic by default), `period` (30d by default, read by classic only) and `theme` (light by default, read by status and card). The status page id is the last part of its public URL, and the monitor id is the `id` field of that monitor in the status page API. The README badge button on a monitor in the dashboard fills both in for you.

 terminal 

```bash
PAGE="your-status-page-id"
KEY="your-monitor-id"
BADGE="https://api.logdash.io/public_dashboards/$PAGE/badges/$KEY.svg"
BADGE="$BADGE?style=classic&period=30d"

# Expect 200 and image/svg+xml before you commit it
curl -sI "$BADGE"

# Append it to the README, linked to the status page
echo "[![API uptime]($BADGE)](https://logdash.io/d/$PAGE)" >> README.md
```

GitHub serves README images through its own image proxy, which follows the 60-second cache header, so a fresh outage shows up on the badge within a few minutes rather than days. For a themed style in a README, the README badge dialog in the dashboard can output a picture element with a dark source instead of plain markdown.

## Status badge with shadcn and Tailwind

shadcn themes switch dark mode with a class, not the system setting, so a picture element would ignore your toggle. Render both themes and let Tailwind pick.

 components/status-badge.tsx 

```typescript
const PAGE = 'https://logdash.io/d/your-status-page-id';
const BADGE =
  'https://api.logdash.io/public_dashboards/your-status-page-id' +
  '/badges/your-monitor-id.svg?style=status';

export function StatusBadge() {
  return (
    <a href={PAGE} className="inline-flex">
      <img
        src={`${BADGE}&theme=light`}
        alt="API status"
        className="h-5 dark:hidden"
      />
      <img
        src={`${BADGE}&theme=dark`}
        alt="API status"
        className="hidden h-5 dark:block"
      />
    </a>
  );
}
```

1. **Add the monitor** Paste your health URL. Checks run every 5 minutes on the free plan, every minute on Builder and every 15 seconds on Pro.
2. **Publish and copy the badge** Add the monitor to a status page, publish it, and open README badge on the monitor. Pick a style, a period or a theme, and copy the snippet.
3. **Watch it turn red** Connect Telegram and make the endpoint return 503\. The status badge reads Down within a couple of minutes, and the Telegram alert with the status code has already reached you.

## Uptime Kuma badge generator

### Logdash vs Uptime Kuma badges

| Feature                        | Logdash                                    | Uptime Kuma                                             |
| ------------------------------ | ------------------------------------------ | ------------------------------------------------------- |
| Where the badge is served from | The hosted Logdash API                     | Your Kuma server, up only when that box is              |
| Badge types                    | Uptime, current status, 90-day card        | Status, uptime, ping, response time, certificate expiry |
| Uptime window                  | 24h, 7d, 30d or 90d                        | Any duration you put in the URL                         |
| Look                           | Three fixed styles, light or dark          | Five shields styles, custom labels and colours          |
| Generator                      | This page, or README badge on each monitor | Badge Maker in the status page settings                 |

### When Uptime Kuma is the better pick

- You already run Kuma, and the badge only has to be as available as the server it describes.
- You want ping, response time or certificate expiry badges. Logdash draws uptime and status only.
- The badge has to match shields badges next to it, with your own labels and colours.

### How do I add an uptime badge to a README? 

Publish a status page with the monitor on it, open README badge on the monitor, pick classic and a period, and paste the markdown. It is an image link to an SVG served by Logdash, so there is nothing to install or rebuild.

### Is there an Uptime Kuma badge generator? 

Yes. Kuma has a Badge Maker in the status page settings, for monitors on a published status page. Logdash works the same way, with the badge served from its hosted API instead of your server.

### How do I add a status badge to GitHub? 

Paste the badge markdown into README.md. A GitHub Actions badge shows whether a build passed, not whether production answers, so use the status style for live state or classic for uptime.

### Is there a status badge for shadcn or Tailwind? 

Use the status style with two img tags, one per theme, and let dark:hidden and dark:block switch them, as in the snippet above. An h-5 class keeps it at its native 20 pixels.

## Keep reading

[All free tools](https://logdash.io/tools): One page per tool, each with the tool itself, the command or formula behind it and a monitor that keeps checking after you leave.

[Cron expression generator](https://logdash.io/tools/cron-expression-generator): The cron expression generator builds a schedule once and writes it in four dialects: classic 5-field Unix cron, 6-field cron with seconds for node-cron and Spring, Quartz, and AWS EventBridge, each with its own field order and weekday numbering.

[Is my site down](https://logdash.io/tools/is-my-site-down): Enter your URL and Logdash requests it from its own servers, outside your network, and shows the status code and response time within a few seconds, so you know whether the site is down for everyone or just for you.

[HTTP status checker](https://logdash.io/tools/http-status-checker): Enter a URL and Logdash sends a GET request from its servers, follows up to 5 redirects and shows the final HTTP status code with the time the whole request took.

[Uptime monitoring](https://logdash.io/features/monitoring): HTTP checks as often as every 15 seconds. When one fails, Telegram tells you before your users do.