OG Image Generator

Design a 1200×630 link preview and watch it render as it will actually appear in X, LinkedIn, Slack, WhatsApp, Discord, iMessage, Telegram, Facebook and Google Discover, each with its own crop, its own truncation and its own display size. Ten presets, full typography control, batch generation, and nothing ever uploaded.

How to use it

  1. Type a title, or pull one straight from a live URL: it reads the page’s existing tags and tells you whether that page has an og:image at all.
  2. Pick a preset, then change anything: background, gradient, pattern, grain, typeface, weight, tracking, alignment, decoration, logo and photo.
  3. Check the platform previews. This is the part other generators skip, and it is where you find out that your title is cut at 60 characters in iMessage or that WhatsApp is showing the middle square only.
  4. Turn on the safe area if any of those crops are cutting something important, then export at 2× and paste the meta tags.

What the numbers mean

Why 1200 × 630
It is 1.91:1, the ratio Facebook standardised and everyone else adopted, at a size large enough for retina displays without tipping over the file-size limits. Below 600px wide, several platforms silently drop to a small square thumbnail instead of the large card, which is a different design problem entirely.
The safe area
WhatsApp crops a link preview to a square, and Google Discover crops toward 4:3. On a 1200×630 canvas the surviving region is the centred 630×630 square, which means 285 pixels on each side are invisible on those surfaces. A title that runs the full width reads perfectly on X and gets cut in half in a WhatsApp forward.
Why the description often disappears
X drops og:description entirely on large-image cards, and LinkedIn does the same. On those surfaces the image and the title are the whole message, which is an argument for putting the substance into the image rather than relying on text that may never render.
Contrast at thumbnail size
Slack unfurls at roughly a third of full width. Type that is comfortable at 1200px is around 120px there, and low-contrast text that looked elegant in the editor becomes unreadable. The contrast ratio shown under the canvas is the WCAG figure; below 4.5:1 is where it starts to fail at small sizes.

Questions

Are my images uploaded anywhere?

No. Logos and background photos are read in your browser with the File API and drawn straight to a canvas; the export is generated locally too. The only request this page can make is the optional “pull from a URL”, which fetches that public page server-side so its tags can be read, and it sends nothing but the URL you typed.

Why does my title shrink when I type more?

The title auto-fits: it reduces size until it fits within the number of lines you allow, so a long title never clips mid-word. If it has shrunk more than you want, raise the maximum line count or shorten the title, and check the Slack preview, because that is where small type stops working first.

What size should the file be?

Under 1MB is a safe target, WhatsApp is the strictest common surface and skips previews on large files. A flat design exports at 2× well under that, but grain and photographs both defeat PNG compression badly: the same image with grain on can be five times larger. If you are using either, export WebP or JPEG instead, which will be a fraction of the size at the same visual quality.

Do I need a different image for every page?

It helps, but a per-page image matters far less than having one at all. A shared branded image beats a blank card everywhere. If you do want per-page images, the batch box takes a list of titles and generates one file each, keeping the design fixed.

Why does my card still show the old image after I change it?

Every platform caches aggressively. Facebook and LinkedIn both have public debuggers that force a re-scrape, X refreshes on its own schedule, and Slack caches for around 30 minutes. Changing the filename is the reliable way to force a fresh fetch everywhere at once.

Guides that use this tool

Other free tools