Layout
Preview1200 × 630
OG CoverFreeNo watermarkOG CoverFreeNo watermarkOpen Graph images are the pictures that appear when a link is shared on X, LinkedIn, Slack, Facebook or iMessage. This tool makes them in your browser: pick a layout, type your headline, choose a theme, and download a PNG. No watermark, no sign-up, and nothing is stored.
A link with no og:image tag unfurls as a line of grey text, and a link with one takes several times the space in a feed. That is the whole reason this page exists. Every card is composed from 30 arrangements, 24 themes and 13 surface treatments, rendered server side at the exact pixel size each platform asks for, so nothing is scaled up from a screenshot and nothing arrives blurry.
Four steps, about a minute, entirely in this tab. There is nothing to install and no account to create.
Choose one of the 30 arrangements by the job the card has to do: a headline, a screenshot, a quote, a number, a release note. Switching keeps everything you have already typed.
Type the title and one supporting line. Keep the headline under about ten words, because every platform scales it down and crops the edges before anyone reads it.
Apply one of the 24 themes for palette and typeface, then one of the 13 surface treatments for depth, texture or hand drawn ink. Colours, fonts and spacing stay editable underneath.
Pick a size preset, 8 of them covering every social surface, then download a PNG, JPEG or WebP at 1x or 2x. Nothing is stored, and there is no watermark.
A downloaded PNG is half the job. The other half is three tags and a re-crawl, and the tags below update as you type above.
Upload the PNG to any public URL: your own CDN, object storage, or the /public folder of the site itself. It has to be reachable without a login: crawlers do not carry your cookies.
https://cdn.yoursite.com/og-image.pngInto the <head> of the page you are sharing. og:image must be an absolute URL, not a relative path.
<meta property="og:title" content="Create beautiful OG images without leaving your browser" />
<meta property="og:description" content="30 layouts, 24 themes, and one-click PNG export." />
<meta property="og:image" content="https://cdn.yoursite.com/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />Every platform caches the first version it sees, sometimes for days. Run the URL through a debugger to force a refresh before you announce anything.
The numbers worth knowing before you export, so nothing important lands where a platform crops it.
Keep the headline and any logo inside the dashes. Platforms crop the edges differently, and the corners are the first thing to go.
Facebook, Slack, iMessage, most link unfurls. Every one of these is one click in the Layout tab.
Stay under 5 MB. Several platforms refuse anything larger, and a crawler that times out fetching the image falls back to no card at all. A 1200 × 630 export from here lands well under it.
1200 x 630 is the one shape to use if you only make one. If you are shipping to a specific surface, these are the numbers and the caveats that go with them.
| Platform | Size | Ratio | Worth knowing |
|---|---|---|---|
| 1200 x 630 | 1.91:1 | Reads og:image. Keep it under 8 MB, and expect the sides to crop on mobile. | |
| X (Twitter) | 1200 x 600 | 2:1 | Needs twitter:card set to summary_large_image, otherwise the card is a thumbnail. |
| 1200 x 627 | 1.91:1 | Caches hard. Use the Post Inspector to force a refresh. | |
| Slack | 1200 x 630 | 1.91:1 | Reads og:image and rounds the corners of the unfurl. |
| Discord | 1200 x 630 | 1.91:1 | Reads og:image. A large preview needs the summary_large_image card type. |
| WhatsApp and iMessage | 1200 x 630 | 1.91:1 | Small previews, so a short headline survives and body copy does not. |
| Instagram feed | 1080 x 1080 | 1:1 | Uploaded rather than crawled. Square keeps the most room for type. |
| Instagram and TikTok stories | 1080 x 1920 | 9:16 | Keep text clear of the top and bottom 15%, where the interface sits. |
| 1080 x 1350 | 4:5 | Tall pins take more feed height and get read for longer. | |
| Email header | 1200 x 400 | 3:1 | Wide and short, so it does not push the first paragraph below the fold. |
All 30 arrangements, grouped by the job the card has to do. Switching between them keeps whatever you have already typed, so trying one costs nothing.
Real Open Graph images rendered live by the same engine that powers the editor: Satori and resvg, roughly 60ms each. Pick the one closest to what you are shipping and make it yours.
Admit one
Field ledger
Launch note
Install command
Product window
SaaS product
Blog post
Product launch
Marketing
Feature essay
Sale poster
Community meetup
Drop announcement
Docs page
Statement card
Pull quote
Landing page
Course lesson
Dashboard update
Product tour
Mobile app
Job opening
Testimonial
Metric
Team member
Sketch note
Launch note
Focus card
Team grid
Issue bands
Margin aside
Cover
Before / after
Metrics
Byline mark
Bold gradient
Handset
Brand bloom
Launch orbit
Wash letter
Quiet bloom
Screen deck
Handset row
Template wall
Quiet serif
Second clause
Feature row
Developer terminal
Dispatch
30 layouts, 24 themes, 13 treatments and 8 sizes, free, with no watermark and no sign-up.
An OG image, or Open Graph image, is the picture that appears when a link is shared on X, LinkedIn, Slack, Facebook, Discord or iMessage. It comes from an og:image meta tag in the page HTML. Without one, most platforms show a bare text link and no picture at all.
1200 x 630 pixels works everywhere and is the size to use if you only make one. X renders 1200 x 600 well, LinkedIn prefers 1200 x 627, and Instagram wants 1080 x 1080 for the feed or 1080 x 1920 for a story. Every one of those is a single click in the Layout tab.
Yes. No account, no watermark, no trial, and no paid tier waiting behind a feature you need. Rendering happens on request and the image downloads straight to your machine.
No. The editor runs in the browser, there is nothing to install, and no email address is asked for. Open the page, type a headline, download the image.
Four cover almost every platform: og:title, og:description, og:image, and twitter:card set to summary_large_image. og:image must be an absolute URL rather than a relative path, because the crawler fetches it without your page as context. The Ship It section on this page builds all four from whatever you have typed into the editor.
Every platform caches the first version it fetched, and some hold it for days. Change the file name or add a query string so the URL is new, then run the page through the Facebook Sharing Debugger or the LinkedIn Post Inspector to force a re-crawl. X and Slack publish no debugger, so share the link somewhere private once to warm their cache.
PNG for text, flat colour and screenshots, because it keeps type crisp. JPEG for photographs and heavy gradients. WebP is the smallest of the three and is read by every current platform. All three export from the toolbar, at 1x or 2x.
Very little in practice. X falls back to og:image when twitter:image is absent, so a single og:image plus twitter:card set to summary_large_image is enough. Set twitter:image only when you want X to show a different picture from the one Facebook and Slack get.
No. Renders are generated on request and streamed back to your browser, and uploads travel with the request without ever being written to disk. Closing the tab is the whole retention policy.
Yes. There is no watermark and no attribution requirement, and the images you make are yours. Check the licence of any photograph, logo or font you did not create yourself, since this tool cannot clear those for you.
Yes. Upload a logo, an avatar and a main image from the Content tab, or paste an https URL to one. Several layouts are built around a screenshot or a full bleed photograph and will use it the moment it is added.
Yes. Alongside the Open Graph shape there are square, portrait and story presets, so the same headline can be exported at 1080 x 1080 for a feed post, 1080 x 1350 for Pinterest, and 1080 x 1920 for an Instagram or TikTok story.
It is narrower on purpose. There is no canvas to arrange and no layer panel to manage: pick an arrangement, type your copy, and the layout handles the composition. That turns a share image into a one minute job rather than a design task.
The editor is built for making them by hand, one at a time, which is what most sites need. If you want them generated per page at build time, export a card here as the visual reference and reproduce it with an image renderer inside your own framework.
Longer answers to the problems that come after the image is made.
Your link preview is showing the old picture, or no picture at all. Here is what each platform caches, how long it holds it, and the one trick that beats every cache.
21 August 2026 · 7 min read1200 x 630 is the answer if you only make one. Here is the full table, what each platform crops, and where to keep your headline so it survives.
14 August 2026 · 5 min readThe Metadata API, metadataBase, per-route overrides, and the three mistakes that make a card render blank in production.
7 August 2026 · 3 min readA share image is read at thumbnail size, in a scrolling feed, next to twenty others. These are the rules that survive those conditions.
31 July 2026 · 6 min read