Skip to content

OG image generator — free 1200×630 social cards

Free · no sign-up · runs in your browser

Generate an Open Graph image for any page: type a title, pick a theme, download a 1200×630 PNG. Runs entirely in your browser — no account, no upload, no watermark.

Drawn as large as fits in three lines. Long titles shrink before they are cut.

Your domain or brand, drawn small above the title.

Optional PNG or SVG. Read in this page, never uploaded.

Preview

The card is drawn in this page and saved straight from the canvas. Nothing is uploaded — check your network tab.

Meta tags

<meta property="og:title" content="How we cut our build time in half" />
<meta property="og:description" content="A short, honest summary of the page — the line that decides whether the card earns a click." />
<meta property="og:image" content="https://example.com/how-we-cut-our-build-time-in-half.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/how-we-cut-our-build-time-in-half.png" />

Paste into <head> once the image is hosted, with the absolute URL.

An Open Graph image is the picture people see before they see your page — in a Slack thread, a LinkedIn post, an X reply. This generator draws one on a canvas in this tab: type the title and description, choose a size and a theme, drop in a logo if you have one, and download the PNG. Nothing is uploaded, there is no sign-up, and the file has no watermark. The title shrinks to fit before it is ever cut, so a long headline stays whole and readable rather than running off the edge.

How it works

  1. 01Type the title. It is drawn as large as it can be while still fitting in three lines — long titles get smaller rather than getting chopped, and you are told if one had to be cut.
  2. 02Add a description if the card needs a second line of context. Two lines is the practical limit before the type gets too small to read at feed size.
  3. 03Put your domain or brand name in the site field. It renders as a small eyebrow above the title, which is what makes a card look like it belongs to a site rather than to a template.
  4. 04Pick a size. 1200×630 is the default and covers Open Graph and X's summary_large_image at once; the square is for feeds that crop a wide card badly.
  5. 05Pick a theme, or drop in a PNG or SVG logo — it is drawn at the top left, beside the site name.
  6. 06Download the PNG and reference it from your page's og:image and twitter:image tags. The meta tag block on this page is ready to paste once you have hosted the file.

Use cases

  • Giving a blog post a share card without opening a design tool or waiting on a designer.
  • Making a consistent set of cards for a docs site — same theme and site name, one title per page.
  • Replacing the grey placeholder a framework generates by default, which is the single cheapest improvement to how a link looks when shared.
  • Mocking up how a headline will actually look in a Slack unfurl before committing to the wording.
  • Producing cards for a client's site without uploading their unreleased copy to a third-party service.
  • Checking that a long title still reads at feed size, where the card is often shown at a third of its real width.

Frequently asked questions

What size should an OG image be?

1200×630 pixels. That is the aspect ratio Facebook, LinkedIn, Slack and Discord crop to, and it also satisfies X's summary_large_image card, so a single file covers every major consumer. Going larger than 1200×630 gains nothing — it is downscaled on arrival — and going smaller risks the platform refusing to show a large card at all. X requires at least 300×157 and under 5MB; a PNG at this size is typically well under 100KB.

Is anything uploaded to a server?

No. The card is drawn on an HTML canvas in this tab and saved straight from it, and a logo you add is read with the browser's own file API. There is no request to any server, including ours — you can confirm it by opening your browser's network tab while you use the tool, or by disconnecting from the network after the page has loaded. That is also why there is no account and no rate limit.

Why does my title get smaller instead of being cut off?

Because the words are what earn the click. The generator tries the largest font size first and steps down until the title fits in three lines; only when the smallest size still overflows does it cut the tail and add an ellipsis, and it tells you when that happened. Most generators do the opposite and silently clip, which is how cards end up shipping half a sentence.

Can I use my own font or brand colours?

The card is drawn with the system UI font stack, which renders consistently without waiting on a webfont, and the four themes are fixed, contrast-checked pairs. If you need an exact brand font or colour, the honest answer is that a generated PNG is the wrong tool — build the card as HTML and screenshot it, or use a render-on-request service. This tool is for getting a good card in fifteen seconds, not a pixel-exact one.

Do I still need meta tags after downloading the image?

Yes. The PNG does nothing until a page points at it. Host the file somewhere public and add og:image and twitter:image pointing at its absolute URL — a relative path will not work, because the crawler fetching it has no page context. Add og:image:width and og:image:height too; they let a consumer reserve the right space before the image has loaded. The block on this page has all of it filled in.

Why is my new card not showing when I share the link?

Almost always caching. Every platform caches the first card it saw for a URL, often for days. Facebook's Sharing Debugger and LinkedIn's Post Inspector both have a re-scrape button; X refreshes on its own schedule and cannot be forced. If a platform is showing nothing at all rather than a stale card, check that the image URL is absolute, publicly reachable without a login, and served with an image content type.

Related resources

Related reading

More tools