Make a 1200 × 630 social share image
Type a headline and get back the image that appears when your link is pasted into Facebook, LinkedIn, WhatsApp, Slack or X. The title wraps and shrinks to fit, the colours are yours, and the finished PNG is drawn on a canvas in this tab rather than on a server.
How to use the OG Image Generator
- Type the title — keep it under about ten words.
- Add a subtitle and your domain or handle if you want them.
- Pick a template and set the colours.
- Render, download the PNG, upload it to your site and point og:image at its URL.
Why 1200 × 630
That size, an aspect ratio of 1.91:1, is what Facebook recommends and what every other platform has standardised on. LinkedIn wants 1200 × 627, X crops summary_large_image cards to 2:1, and Slack, Discord, WhatsApp and iMessage all read the same Open Graph image. A single 1200 × 630 file satisfies all of them with only minor cropping, which is why it is worth making once per page rather than per network.
Facebook ignores images smaller than 200 × 200 entirely, and shows a bare text link instead. Keeping the file under 5 MB avoids every platform’s size ceiling; a flat-colour PNG of this size is usually well under 100 KB anyway.
Design for a thumbnail, not a poster
In a mobile feed your 1200-pixel image is often rendered about 300 pixels wide. A 64-pixel headline becomes 16 pixels — readable — while 24-pixel body text becomes 6 pixels, which is not. That is the whole design constraint:
- Under ten words in the title. This tool starts at 74 px and steps down until the text fits in four lines; if it is shrinking a lot, cut words rather than accepting small type.
- Keep everything important within the middle 80% of the frame. Some clients crop to squares or to 2:1, and corners are the first thing to go.
- High contrast. Aim for at least 4.5:1 between text and background — the render report tells you the exact ratio.
- One idea. Logos, straplines, author photos and a headline all fighting for 300 pixels produce a grey smudge.
Wiring it up
Upload the PNG somewhere public and reference it with an absolute HTTPS URL:
<meta property="og:image" content="https://example.com/og/build-time.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Headline of the article">
<meta name="twitter:card" content="summary_large_image">The URL must resolve without a redirect, without a login and without hotlink protection: crawlers do not run JavaScript or hold cookies. Relative paths fail silently — the preview simply appears without a picture.
Caching
Every platform caches the scraped image, often for days, and some cache the whole preview permanently against the URL. If you change an image after the link has been shared, either rename the file or add a version query such as ?v=2, then force a refresh with Facebook’s Sharing Debugger or LinkedIn’s Post Inspector. Editing the tag alone will not update previews that are already in the wild.
Fonts
The image is drawn with your system’s default interface font stack, so it uses Segoe UI on Windows, the system font on macOS and iOS, and Roboto on most Android and Linux machines. Line breaks are computed from the real measured width of your text, so the wrapping you see is the wrapping you get.
Frequently asked questions
Can I add my logo?
Not in this version — it is text only. Render the image here, then drop your logo on top in any image editor, keeping it inside the safe area away from the edges.
What should the alt text say?
Describe the image, which for a text card means repeating the headline. Several platforms read og:image:alt aloud to screen reader users.
Why does my title look small?
The renderer shrinks the type until the title fits in four lines. If it has dropped a long way, the headline is too long for a share card — shorten it.
Is one image enough for every network?
Yes for practical purposes. X crops to 2:1 and LinkedIn to 1200 × 627, both of which take a small slice off a 1200 × 630 image, which is why the safe area matters.
Privacy
This tool runs entirely inside your browser using WebAssembly and the Canvas/File APIs. Your files are never uploaded to ToolFlint or any third party; you can verify this in your browser's network tab or by switching to airplane mode after the page loads. Read how we process files.
Last updated 2026-09-23.