OG Image Generator - 1200×630
Type a headline, pick a background, download the PNG. Built to 1200×630, the size platforms actually render, live on a canvas in this tab.
Local onlyEverything on this page - the preview, the randomness, and every file you download - is generated by JavaScript in this tab. Nothing you type, pick, or upload is transmitted, and the page keeps working offline.
An Open Graph image is the picture a link shows before anyone clicks it - the card Facebook, LinkedIn, Slack, Discord, and iMessage build the moment a URL gets pasted in, whether or not the page supplies one. Meta's own sharing guidelines put the recommended size at 1200×630 pixels, close to a 1.91:1 ratio, with a hard floor of 200×200 and a note that anything under 600×315 renders visibly smaller in the feed. This generator holds that one size. Type your headline, pick a background, and the canvas above renders the finished card, with the title auto-shrinking and wrapping to fit.
The background styles come from the same geometry engines as the rest of ShapeKiln - the mesh option gives you a soft multi-color field that makes plain text look designed. Everything renders in this tab: the headline, your logo, and the exported PNG never touch a server, and there is no watermark, account, or per-image fee.
Posting the same link to X and LinkedIn too? Those platforms crop a 1200×630 image into their own header ratios instead of showing it whole. Use the X Header Generator for the 1500×500 profile banner and the LinkedIn Banner Generator for the 1584×396 background photo - same controls, sized right the first time instead of getting cropped.
Questions this tool gets asked
What size should an OG image be?
1200×630 pixels, close to a 1.91:1 ratio. That is the figure in Meta's own sharing documentation, and it is what Facebook, LinkedIn, Discord, and Slack render at full size. Below 600×315 the image still shows, just noticeably smaller in the feed.
How do I add the OG image to my site?
Upload the PNG anywhere on your site, then add two tags to your page's
: an og:image meta tag pointing at the file's absolute URL, and ideally og:image:width and og:image:height set to 1200 and 630. Platforms cache the card aggressively, so use each one's own sharing debugger to force a refresh after you change it.Is this OG image generator really free?
Yes - free, no watermark, no signup, no image limit. The page is supported by ads. Because the card is drawn on a canvas in your own browser, generating a thousand images costs us the same as generating one.
Does my headline or logo get uploaded?
No. Text is drawn onto a local canvas element and your logo file is read directly into memory in this tab. The PNG is assembled and downloaded entirely on your machine; nothing is transmitted.
Why does my downloaded PNG look sharper than the preview?
The preview is scaled down to fit your screen, but the download always renders at the full 1200×630.
I need a header for X or LinkedIn too - is that the same file?
No - reusing a 1200×630 OG image as a profile header gets it cropped to whatever ratio that platform actually displays. Make each size on its own page: the X Header Generator (1500×500) and the LinkedIn Banner Generator (1584×396) use the same headline and background controls, just at the right dimensions.
Method
- Algorithm
- Canvas 2D drawing with four background modes: flat fill; a corner-to-corner linear gradient (
ctx.createLinearGradient(0,0,w,h)); a "mesh" background of stacked radial gradients, one per accent color, each placed at a mulberry32-seeded position and radius; and an "edge" background, one radial gradient anchored at the top-right corner plus a flat linear-gradient bar along the bottom edge. Title text auto-shrinks in a step-down loop and word-wraps to at most 3 lines; ink color (light or dark) is chosen from the base color's relative luminance. One engine serves all three banner pages, with this page's size pinned by its markup. File:og-image.js:28-147(mesh block 50-60, edge block 61-74, luminance 31-34, text-fit loop 114-121). - Determinism
- Output is a pure function of its controls for the solid, linear, and edge backgrounds. The mesh background draws from
mulberry32(seed)(og-image.js:49); with the mesh background selected, the same seed and controls reproduce the same card exactly. - Export
- PNG only, at this page's fixed 1200x630 - the size is pinned in the page markup and read once at load (
og-image.js:10), and the download always renders at those full pixel dimensions regardless of the preview scale (og-image.js:181-185). That is far below every browser's canvas pixel cap (Chrome/Firefox ~268 million px total, Safari ~5.24 million, iOS ~4096 per side) - there is no risk of the silent-failure ceiling here. This is a screen-resolution social preview card, not a print file: browsers expose no CMYK color space at all, so nothing exported here can be truthfully called print-ready. - Licence
- Output is the user's to use for anything, including commercial work, with no attribution required.