OG Image Generator
Type a title, pick a template and export a pixel-exact 1200×630 Open Graph image — rendered entirely in your browser.
- The image is rendered with this device's fonts, so exact glyphs vary slightly across machines.
Download renders the design at exact pixel size.
Press ? for shortcuts
Do it offline:$ magick -size 1200x630 gradient:'#0f172a-#1e293b' -gravity west -pointsize 64 -fill white -annotate +80+0 'Your Title' og.png
How to use it
- Pick a template — left title, centered, badge top, split accent, footer bar, or minimal — and watch the seeded design redraw instantly.
- Type your title (up to 120 characters), and optionally a subtitle and a footer such as your site name — the badge template wears the footer as a chip.
- Pick dark or light, an accent color and an optional dot or grid pattern; a chip warns when the accent falls below 3:1 or a line had to be shortened.
- Press Download PNG for a 1200 × 630 file — or tick @2x for 2400 × 1260 — and declare it in your page's og:image meta tag.
Type a headline, pick one of six templates, and a 1200 × 630 Open Graph image assembles in front of you — title wrapped and sized to fit, accent artwork in place, dark or light. The export is a PNG at exactly the size platforms document, drawn on this device: the network panel stays silent while you design, and no font is downloaded to draw it.
How it works
An Open Graph image is the picture a messenger or social platform shows when someone shares your link. At share time the platform reads the og:image meta tag in the page's head, downloads the file it names, and caches it into the link card. This page produces that artwork; the tag markup stays with your site.
1200 × 630 is the size platform documentation converges on: Facebook's sharing guidance recommends it for high-resolution link cards and frames them at 1.91:1, and X's summary card with large image accepts the same file. Exporting at exactly those pixels means no platform rescaling or re-cropping — so the export canvas here is fixed, never scaled up from the preview.
Every text box runs a binary search over integer font sizes between 32 and 88 pixels: at each candidate the text is greedily word-wrapped, and the largest size whose lines fit wins — at most three lines for the title, two for the subtitle. When even the smallest size cannot hold everything, the layout keeps the allowed lines, ends the last with an ellipsis, and warns visibly instead of clipping silently.
Examples
Write once, share everywhereleft-title · title 88px ×2 lines · subtitle 40px ×1 line · no truncationThe seeded design: at the 88-pixel ceiling the title splits into two lines and the subtitle sits under it at 40 pixels.
How teams document breaking API changes without slowing releasescentered · title 69px ×3 lines · subtitle 40px ×1 line · no truncationA longer headline on the centered template lands at 69 pixels across three lines — the search trades size for lines automatically.
word word word word word word word word word word word word word word word word word word word word word word word wordsplit-accent · title 32px ×3 lines · title truncatedTwenty-four repeated words cannot fit three lines of the narrow split column even at the 32-pixel floor — the third line ends in an ellipsis and a warning chip appears.
Every example on this page is executed against the same engine that powers the tool, on every build.
Gotchas worth knowing
og:image and twitter:image can name the same file
X renders links through its own card markup — summary_large_image crops toward 2:1, while Facebook and most chat apps frame near 1.91:1. One 1200 × 630 file serves both: keep the headline off the extreme edges and declare the file in both og:image and twitter:image.
Keep the file light
Platforms re-compress link images and refuse oversized ones — Facebook's guidance caps uploads at 8 MB; a flat-color template PNG lands far under that. The @2x export quadruples the pixel count — use it when high-DPI rendering matters more than weight.
Fonts resolve on this machine
There is no webfont here — the layout names a system font stack, and the image is rendered with this device's fonts, so exact glyphs vary slightly across machines. The math re-measures with the same fonts it draws with, so the stage and the PNG agree on this computer; a colleague's export of the same design may break lines a character earlier or later.
Where the tags go — and where this tool stops
The exported file works once your page's head declares it: an og:image meta tag with the image URL, ideally og:image:width and og:image:height beside it. This page draws the file and nothing else — it never reads a URL. Inspecting the tags a page already declares is the Open Graph Preview tool's job.
Common errors
Title is 121 characters long — this canvas fits at most 120.- The refusal prints your actual count and the cap, measured after trimming outer spaces — three wrapped lines at the floor is already the densest a card stays readable.
Accent "#12g" is not a hex color — use #rgb or #rrggbb, like #38bdf8.- The accent field takes hex only, three or six digits, because it recolors template artwork directly. The swatch picker beside the field always emits in-grammar values.
FAQ
What size should an OG image be?
1200 × 630 pixels, about 1.91:1 — the size Facebook's sharing guidance recommends and X's large-image summary card accepts. This page exports exactly that, or exactly 2400 × 1260 with @2x, so platforms render the card without rescaling surprises.
Is anything uploaded when I generate an image here?
No. The layout is computed and drawn on a canvas inside this page, and the download is a local file save. Verify it yourself: with the DevTools Network panel open, designing and exporting add zero requests.
Why does the same design look slightly different on a colleague's machine?
The text draws with system fonts — Segoe UI on Windows, San Francisco on macOS, Roboto on Android — so glyphs and exact line breaks differ per device. The exported PNG freezes how this machine drew it; share the file when identical pixels matter.
Can I put a logo on the image?
Not in this version — templates are deliberately text-only, which keeps every design shareable as a link and the layout engine free of image decoding. Generate the base card here and composite a logo in any editor.