OG image generator

Build a 1200x630 social preview card.

1200×630px — the standard Open Graph / Twitter card size.

Templates
Background
Direction
Font
Logo (optional)
Image (optional — a product shot or screenshot)
Save as

How to use OG image generator

  1. Pick a template to start from.
  2. Enter your title, and optionally a tag and subtitle.
  3. Set the background colour or upload a background image, then choose the font and text colour.
  4. Optionally add a logo and a product image.
  5. Choose an output format under Save as and click Download to get a 1200×630 image.

When a link gets shared on X, LinkedIn, Slack, Discord or almost anywhere else, the preview card it unfurls into is built from one image — the Open Graph image — at a fixed 1200×630. Without one, the share either shows nothing or falls back to whatever image happens to be first on the page.

Start from a template — Minimal, Dark, Bold gradient, Corporate, Blog or Sunset — then adjust anything: an optional eyebrow tag above the title, the title and subtitle text, a logo, and a background from 20 gradient presets in any of 8 directions (or pick your own two colours, a solid colour, or your own image with a dark overlay for legibility). Add a subtle grid or grain texture for extra polish.

Got a product screenshot or a shot to feature? Drop it into the separate "Image" field and it's placed as its own floating card on the right, with the title and subtitle automatically making room for it — the classic two-column layout for product and feature announcements.

Download as PNG, JPG or WebP and point your page's og:image meta tag at it.

Questions

Where does this file need to go, and what do I do with it?

Host it anywhere publicly accessible from your site, then reference it with <meta property="og:image" content="..."> (and usually og:image:width / og:image:height set to 1200/630) in your page's <head>.

Why 1200×630 specifically?

It's the size Facebook, X/Twitter and most other platforms use as their reference aspect ratio for link preview cards — an image at this size (or the same ~1.91:1 ratio) displays without being awkwardly cropped on any of them.

What's the difference between the background image and the "Image" field?

The background image fills the entire 1200×630 card behind everything else. The "Image" field is a separate, smaller card floated on the right — meant for a product screenshot or feature shot alongside your title, not a full-bleed backdrop.

Do templates overwrite my text?

No — templates only change the background, colours and font. Your tag, title and subtitle stay exactly as you typed them.

My title looks small — why?

Longer titles automatically shrink to keep everything on the card without overflowing. Shorten the title if you want it larger, or accept the smaller size — both stay fully legible.

Is my image uploaded anywhere?

No. The whole card is composited directly on a canvas in your browser — nothing leaves your device.

Guides

Related tools