OG Image Generator — 1200×630 Social Cards
Every page you share needs an image, and for most pages that image is a title on a coloured background. This makes exactly that: type the headline, pick your brand colour, optionally drop in a logo, and download a 1200×630 PNG ready to point og:image at. Three templates, no canvas to learn, and the text shrinks to fit rather than running off the edge — which is the one thing you cannot see going wrong until someone shares the link.
Card content
33 / 300 characters. Text shrinks to fit — it is never clipped.
49 / 400 characters.
Left-aligned, with a brand bar down the edge. The safe default for an article or a blog post.
Add a logo (optional)
PNG, JPG, WEBP or SVG. It is drawn above the title at the template's logo height, and never leaves your browser.
Your card — 1200×630
Enter a title and a hex brand colour to see the card.
Outgrown three templates?
Moda’s canvas takes the same card and lets you move everything on it — then export the whole set.
Try Moda free →Why 1200×630, and what happens at other sizes
Facebook, LinkedIn and Slack all read the same Open Graph tags and all want a large image at a 1.91:1 ratio; 1200×630 is the smallest size that satisfies every one of their minimums with room to spare, which is why it has become the default. X reuses it for a summary_large_image card. Going smaller risks a platform downgrading you to a thumbnail card, and going larger buys nothing — the scrapers resample anyway, and some refuse images over 5 MB. Going wider or squarer is worse than either: the platforms centre-crop to their own ratio, and a title laid out for a square gets its edges eaten.
Text that shrinks instead of clipping
The failure mode of every templated card generator is a title that runs past the edge or into the corner of the image, because it was laid out for a headline of about the length the designer had in mind. Here the title is wrapped and then the type size is reduced until the whole thing sits inside the column, so a four-word headline is set large and a twenty-word one is set small, and both fit. A word longer than the column — an unbroken URL, say — is broken by character rather than allowed to overhang. Only when the smallest size still cannot hold the text is anything cut, and when that happens the page says so on screen instead of handing you a card with a missing ending.
Templates rather than a blank canvas
There are three arrangements and no way to drag anything, which is a deliberate limit rather than an unfinished feature. Headline gives the widest text column and a brand bar down the edge; Centered puts the words on a solid brand background, which survives being shrunk to a feed thumbnail better than anything else here; Sidebar gives a third of the card to a brand panel and is the narrowest column of the three. Because the arrangement is fixed, the output is deterministic — the same inputs produce the same PNG, every time — which is what makes a card generator useful for a whole site rather than for one post. The text colour is not offered as a choice either: it is picked from the brand colour by contrast, because the wrong answer there produces an unreadable card and the right one is arithmetic.
Pointing your pages at the image
A downloaded card does nothing until the page references it. Upload the PNG somewhere with a stable absolute URL and add `<meta property="og:image" content="https://…">` in the head, plus `<meta name="twitter:card" content="summary_large_image">` so X uses the large layout. Two details bite people: the URL must be absolute, because relative paths are not resolved by scrapers, and the platforms cache aggressively, so a changed image usually needs the URL to change or the platform’s own debugger to be run against the page. Adding `og:image:width` and `og:image:height` of 1200 and 630 lets a scraper lay the card out before it has finished downloading it.
Frequently asked questions
What size should an OG image be?
1200×630 pixels. That is the 1.91:1 ratio Facebook, LinkedIn and Slack lay out large cards at, and it is also what X uses for summary_large_image. It is the only size this page produces, because a card at any other size gets cropped or downgraded by at least one of them.
Is my logo uploaded anywhere?
No. The logo is decoded and drawn by your own browser, and the finished PNG is encoded in the tab as well — no image, colour or headline is sent to a server at any point, and there is no account to create. You can confirm it by watching your browser’s network tab while you build a card.
Can I use a transparent PNG or an SVG logo?
Yes to both. Transparency is preserved when the logo is drawn onto the card, and an SVG is rasterised at the size it is drawn at, so it stays crisp. An SVG that depends on an external font or stylesheet will render without them — that is how browsers treat an SVG used as an image — so convert text to outlines before exporting a logo that contains type.
Why is my title being cut off?
Because it is longer than the template can hold even at its smallest type size. The Sidebar template has the narrowest column by some margin, so switching to Headline is usually enough. Otherwise, shorten the title: a card is read at thumbnail size in a feed, and a headline that needs four lines at 28px will not be read there anyway.
Will the card look the same on my machine as on yours?
Almost, but not exactly. The text is drawn with the system font stack, so the exact glyphs come from whatever your operating system provides, and line breaks can therefore differ slightly between a Mac and a Windows machine. The layout, colours and dimensions are identical. If you need byte-identical cards across machines, generate them all in one place.
Can I make a whole set of cards at once?
Not on this page — it makes one card at a time, and adding a spreadsheet import would make it a different, much heavier tool. For a series that has to stay consistent across a site, building the card once on a Moda canvas and duplicating it with the text swapped is the faster path, and it keeps the layout editable.