The one size that works nearly everywhere
Every platform publishes its own preferred share-image dimensions, and reading those pages back to back makes the problem look harder than it is. In practice 1200 by 630 pixels is the size that behaves: Facebook, Slack, Discord, WhatsApp, iMessage and most link-unfurl bots read it as the og:image and render it without complaint, and X accepts the same file for a large summary card, trimming a sliver off the top and bottom to reach its own 16:9 shape.
That is why the four presets here are not equal in usefulness. Open Graph at 1200 by 630 is the default and the one to reach for. The X preset (1200 by 675) and the LinkedIn preset (1200 by 627) exist because those platforms document those exact numbers, and some people want the match to be exact; the practical difference from the default is a few dozen pixels of crop. Pinterest is the genuinely different one at 1000 by 1500, portrait rather than landscape, because a pin is a tall object in a masonry feed and a landscape card looks lost there.
If you are making one image, make the 1200 by 630. If you are making a set for a blog post that will also be pinned, make that one and a Pinterest version, and skip the other two.
Two lines in a box is the whole input
There is a single text area, and the convention is positional: line one is the title, everything after it becomes the subtitle, joined with spaces and with blank lines discarded. Titles cap at 200 characters and subtitles at 300, which is far past the point where either still reads well.
That design is a constraint made visible rather than a stylistic choice. This tool runs on a shared text-in, image-out shell used by several other pages on this site, and the option schema behind those dropdowns supports selects, numbers and checkboxes only, with no free-text field. Rather than fork a bespoke component (or modify a shell that other tools depend on, which is how you break three pages while shipping one), it borrows the same two-line convention our Wi-Fi QR code generator already established for the same constraint.
How a long title gets fitted
The interesting part of this tool is not the drawing, it is the type fitting, and it works like a human sizing a headline in a layout program: try big, and step down until it fits.
On a 1200 pixel wide canvas the search starts at 78 px, which is 6.5 percent of the width, and steps down 4 px at a time to a floor of 28 px. At each size the title is word-wrapped to the available width (984 px after 9 percent side margins) and accepted if it fits in three lines or fewer and inside a block-height budget of 62 percent of the vertical space. That second condition bites hardest on the short landscape canvases, where three lines at the maximum size come close to filling the whole budget; on the tall Pinterest canvas there is so much vertical room that the line count is what limits the size instead.
Concretely, a title of around forty characters clears the first size it tries and never enters the loop properly. Push it to ninety and the search settles several steps lower. Only when three lines at 28 px still overflow does the last line get truncated with an ellipsis, which is a deliberate last resort: a clipped word reads as a mistake, but text running off the edge of the canvas reads as a broken tool.
The subtitle is then sized as 42 percent of whatever the title landed on, clamped between 18 and 46 px, wrapped to at most two lines, and separated from the title by a gap of 35 percent of the title size. Title and subtitle are treated as one block and centred vertically together, so a card with no subtitle centres its title exactly rather than leaving a hole where the subtitle would have been.
Contrast you do not have to check yourself
Nothing here asks you to choose a text colour, because that is a question with a right answer. Each background’s colour stops are converted to a REC.601 luma value with the same function our image filters use, averaged, and compared against a threshold of 140: below it the text is white, above it a near-black navy. The white background is the only preset that trips the dark side of that test, which is exactly as intended.
The four gradients are two-stop diagonals running from the top-left corner to the bottom-right, which is exactly the case a single luma reading has to be honest about. Ocean, Purple and Forest keep both stops on the dark side of the threshold, so averaging them changes nothing. Sunset does not: its orange stop reads brighter than the cut-off while its pink stop reads darker, so the average is what decides, and the tool commits to one text colour for the whole canvas rather than switching colour halfway down a gradient.
The left-aligned template adds a vertical accent bar down the left edge, 14 px wide on a 1200 px canvas, drawn in the text colour at 85 percent opacity so it reads as an accent rather than a second element competing with the headline. The subtitle is likewise drawn at 88 percent opacity, which is enough to establish hierarchy without looking faded.
Generating it and pointing a page at it
- Type your title on the first line and an optional subtitle on the second.
- Choose a Platform size, a Layout template and a Background.
- Click the action button, which reads OG Image Generator, then check the preview, and download the PNG. It is named after the preset, for example
og-image-og.png. - Upload that file to wherever your site serves images, and put its full public URL in the page’s
og:imagemeta tag.
Step four is the one people skip. A social platform’s crawler fetches the image itself, over HTTP, from a public URL, so the PNG in your downloads folder does nothing until it is hosted. Meta Tags Generator will produce the whole tag block once you have the URL, and if you are assembling a site’s launch assets in one sitting, Favicon Generator covers the other half of the job.
What it deliberately will not do
There is no image upload, no custom colour picker, no font choice and no logo slot. Some of that is the shell constraint described above; the rest is that a tool with fourteen controls and no design guardrails produces worse cards than a tool with three. If you need a photographic background or your own mark in the corner, generate the typographic card here and composite on top of it with Watermark Image. If the hero visual should be code rather than a headline, Code Screenshot is the better starting point.
One honest caveat about output stability: the text is drawn with a system font stack, so the same title generated on Windows, macOS and Linux will not be byte-identical, and in an edge case a slightly wider font can push a wrap point. That is the cost of drawing with fonts already on your machine rather than fetching a webfont, which would mean a network request and a dependency on someone else’s CDN staying up. Everything here is composed on a canvas in your tab, which is why a headline for a post you have not published yet never leaves the machine you drafted it on.
