OG Image Generator — Social Share Image Maker

An Open Graph image is the picture that shows up when a link is pasted into a chat, a tweet, or a Slack channel — and every platform that renders one expects a canvas roughly 1200×630 pixels, the size Facebook's og:image and Twitter's summary_large_image cards were both designed around. Get the size wrong and the image comes out cropped, blurry, or squeezed; get the layout wrong and the title reads as an illegible sliver against a busy photo. This tool composes the image at the real target resolution using the Canvas 2D API, so what you see in the preview is the exact pixel grid that ships in the PNG.

Pick a background — a flat color, a two-stop linear gradient built from two colors you choose, or an uploaded photo that gets cropped to fill the full 1200×630 frame the same way a CSS background-size: cover would, instead of being stretched out of proportion. Type a title and an optional subtitle: both are measured character by character against the canvas's own font metrics, so a headline that's too long to fit on one line wraps onto a second or third line at a real word boundary rather than spilling off the edge or getting invisibly truncated. Choose center or left alignment, pick a text color that reads against your background, and drop an optional logo into the corner at a fixed, readable size.

Below the canvas, four small cards approximate how the finished image looks once a real platform wraps it in its own chrome: Twitter/X's card shows only the domain and a bold title beneath the image with no description line, Facebook adds an uppercase domain strip above a title-and-description block, LinkedIn puts the domain below the title with no description at all, and Discord's embed puts the domain, title and description above the image in its own dark theme. These are styled approximations for planning purposes — clearly labeled as illustrative, with a domain line you type yourself — not a live fetch or screenshot of the actual platforms, since sharing a link and letting each platform's own crawler read your page's real og:image and og:title meta tags is what actually produces the live card.

Everything renders locally on an HTML canvas element in your browser: the title, subtitle, uploaded background and logo never leave your device, and the exported file is a clean canvas.toBlob() PNG containing only what you composed — no mockup borders, fake browser bars or platform logos get baked into the downloaded image. If you also need to resize or convert the exported PNG afterward, this site's image resizer and image converter tools pick up right where this one leaves off.