Make the 1200×630 card. Ship it in a minute.
Write a title, pick a template, drop in your logo. The title auto-fits the frame, and the canvas exports a clean PNG or JPEG for your og:image. Nothing leaves your browser.
Content
The font size shrinks automatically until the title fits in three lines.
Design
The safe-area guide is only an overlay — it is never drawn into the exported image. The grid, on the other hand, IS painted into the export, so turn it off if you want a flat background.
Preview
1200 × 630The data URI is a base64 PNG: handy for inline demos, but for production serve the downloaded file at an absolute https:// URL and point og:image at it.
Reference snippet
Replace the URL with the absolute https:// location of your exported file.
Why 1200×630 is the number that matters
Open Graph images are not displayed at the size you draw them; they are re-laid out by every platform, at every breakpoint, next to whatever chrome that platform puts on top. The only way a single asset survives all of those layouts is to match the aspect ratio they were designed for, and 1200×630 — a 1.91:1 ratio — is the one X explicitly recommends for summary_large_image cards and the one LinkedIn and Facebook crop from most gracefully.
1200 pixels wide is also comfortably above every minimum in the wild: X needs at least 300×157 for a large card, and 1200×630 stays far below the 5 MB ceiling even as an uncompressed PNG of a flat design. If you are also setting the dimensions in your head, declare exactly this pair so the crawler can lay out the card before the image arrives.
The safe area is not decoration
A card is never shown alone. On X it may carry a play button; WhatsApp and Slack overlay a domain label; some feeds crop toward a square; every platform rounds the corners. Anything you place within roughly 6 percent of the edge risks being covered or cut. Keep the logo, the title and the call to action inside that inner frame — the preview overlay in this tool marks it for you — and let the background bleed to the edges.
Frequently Asked Questions
Do I need a different image for X and for LinkedIn?
No. Both accept 1200×630, and LinkedIn reads Open Graph while X prefers twitter:image when it exists — pointing both at the same file is the normal setup. Generate a second variant only when you specifically want a different headline per platform, which is rarely worth the maintenance cost.
Why does my exported PNG look blurry on the preview?
The preview is drawn at full resolution (1200×630 canvas pixels) and only scaled down by CSS, so it stays sharp at any display size. If a card looks soft after uploading, the platform is usually re-encoding it — check that you uploaded the exact exported file rather than a screenshot or a resized copy.
Can I use a photo as the background?
Not with this generator, which paints solid and gradient treatments from your palette. Overlaying text on a photograph normally needs a dark scrim for contrast, and the ratio check matters more than the image itself. If you need a photo, generate the card here, then composite it in any image editor at the same 1200×630 size.
Does the file size shown include the logo?
Yes. The estimate re-encodes the finished canvas twice — once as PNG and once as JPEG at quality 0.92 — so the numbers reflect the bytes you would actually download, logo and gradients included.
Is my logo uploaded to a server?
No. The file is read locally with FileReader and painted onto a canvas in your browser. There is no network request, no storage and no account, so the tool works offline once the page has loaded.
Related tools
Meta tag inspector · WCAG contrast checker · All MousyTools
Hecho por MousyDev
Creo herramientas web que respetan tu privacidad: tus datos se procesan en tu propio navegador y nunca pasan por mis servidores.