About this tool
Open Graph image maker, explained
An Open Graph image is the picture that appears when someone shares your link on LinkedIn, Facebook, Slack or iMessage. This maker lets you design one from a title, a template and your colors, then export it as a PNG in five standard sizes, one at a time or all together in a ZIP. Everything is drawn in your browser, including any logo or image you upload.
How to use it
- 1In the Content tab, pick a template (Classic, Centered, Split image, Big number, Quote or Minimal), then write the kicker, title and subtitle, plus a footer and a badge if you want them.
- 2Type your brand name, or click Upload to use your logo file. The Split image template and the Image fill add an Upload an image button for a photo or a product shot.
- 3In the Style tab, choose a font, weight, alignment and title size. In the Background tab, pick one of eight palettes or your own colors, then a fill (Solid, Gradient, Mesh or Image) and a pattern.
- 4Pick a format above the canvas and click Download PNG, Copy to paste the image straight into a post, or All formats (.zip). Type the address where the image will live in the box at the bottom and click Copy tags.
How it works
How the image is built
The canvas is laid out at real size: 1200 × 630 pixels for Open Graph, 1600 × 900 for an X post, 1080 × 1080 for a square post, 1080 × 1920 for a story and 1584 × 396 for a LinkedIn banner. The preview on screen is scaled down, but the export renders the full layout at a 1:1 pixel ratio, so the PNG has exactly those dimensions, and All formats (.zip) does the same for all five.
The title sizes itself: 7.2% of the format's width (capped at 1.9 times its height, for flat banners), multiplied by the square root of 42 divided by your title's length in characters. On the 1200 × 630 format, a 42-character title comes out at about 86 pixels. A floor and a ceiling keep a one-word title from overflowing and a long title readable, and the Title size slider then multiplies the result between 70% and 140%.
Patterns are drawn in your text color at a strength from 4% to 40%. The Image fill puts a 45% black layer over your photo so light text stays readable, and each of the eight palettes pairs a background with a text color that reaches at least a 4.5:1 contrast ratio on it.
Whatever format you are editing, the X, LinkedIn and Slack previews under the canvas use the 1200 × 630 version, the wide shape link cards show. The meta tags block is also always written for that image: og:image with og:image:width 1200, og:image:height 630 and og:image:alt set to your title, plus twitter:card set to summary_large_image and twitter:image, all pointing at the address you type.
When to use it
Ways people use it
Blog posts and newsletters
Give every article its own share image with the title on it, so the post is recognizable in a feed before anyone reads the caption.
Product launches
Use Big number for a headline stat or Split image for a product shot, then download all five sizes of the same design in one ZIP.
Pages with no preview
A page without og:image shows no picture, or whatever image the platform picks. A branded card and the copied tags fix that in minutes.
Profile covers
The LinkedIn banner format, 1584 × 396, fits a personal profile or company page cover with your brand colors and a line of text.
FAQ
Questions people ask
What size should an Open Graph image be?
1200 × 630 pixels, a 1.91:1 ratio, is the standard recommendation and works on Facebook, LinkedIn, Slack and most messaging apps. Keep important text away from the edges, because some apps crop the card. This tool opens on that size, and its meta tags always describe it.
How do I add an Open Graph image to my website?
Upload the PNG to your site, then add a meta tag with property og:image and the full URL of the image in the head of the page. The URL should be absolute, starting with https://. Adding og:image:width, og:image:height and an og:image:alt description gives platforms everything they need on the first share.
Why does the old image still show when I share my link?
Platforms cache link previews. After changing the image, ask them to read the page again: Facebook has the Sharing Debugger and LinkedIn has the Post Inspector. Giving the new image a new file name also avoids a stale cached copy.
Does X use the same image as LinkedIn?
It can. X reads twitter:image and falls back to og:image when it is missing, so one image serves both. Setting twitter:card to summary_large_image asks X for the large image layout instead of a small thumbnail.
What is og:image:alt?
A short text description of the share image, for people who cannot see it, such as screen reader users. Describe what the image shows or repeat its headline. The tags generated here use your title as the alt text, which you can edit after pasting.