OG image generator
The picture a shared link shows, at the size every site crops to.
Transparent PNG, 512 × 512 px, drawn on your device.
Your files stay on your device
This tool runs entirely in your browser. Nothing is uploaded, nothing is stored, and you can even turn off your internet connection before you start.
Example
Example: a 1200 × 630 link preview for a village hall’s Christmas craft fair
A village hall’s website (fictitious: Little Hadley Village Hall) posts its Christmas craft fair and wants the link to look right when it is shared. Headline “Christmas craft fair: Saturday 5 December”, line underneath “Little Hadley Village Hall · Free entry”, colours Forest, text Centred, accent bar on, no picture.
- With no picture the headline has the full width less an 84-pixel margin each side: a column 1032 pixels wide.
- It is set as large as fits in four lines within 52 % of the card’s height, 328 pixels, starting at 139 pixels and shrinking until it fits.
- A 108 × 8 pixel accent bar is centred above the near-white headline; the line underneath is smaller, at most 47 pixels, in pale green, on a dark-to-mid green background.
- Download gives og-1200x630.png. Upload it with the page and point og:image at its full address.
| Where the picture goes | On a 1200 × 630 card | Room for the headline |
|---|---|---|
| No picture | — | 1032 px wide |
| A band down one side | 456 × 630 on the right, cropped to fill | about 610 px wide |
| Behind everything, dimmed | the whole card at 45 %, under a dark wash (a light one on Paper) | 1032 px wide |
| Small, in the corner | up to 101 × 101, bottom left, 84 px from the edges | 1032 px wide |
og-1200x630.png at exactly 1200 × 630: the headline centred in near-white on green, with the bar and the hall’s name in pale green. Wherever the link is shared, the date and the place can be read at a glance before anyone opens the page.
How it works
- Type the headline — the title of the page or the post.
- Add a line underneath if it helps: a site name, a date, a category.
- Pick colours that match the site, and add a logo if you have one.
- Download the PNG and point og:image at it.
Frequently asked questions
- Why 1200 × 630?
- It is the size the big platforms crop link previews to (1.91:1). At that size nothing is cut off on Facebook, X, LinkedIn or Slack, and the picture stays sharp on a high-resolution screen.
- How do I use it on my site?
- Upload the PNG and add <meta property="og:image" content="..."> with its address, plus <meta name="twitter:card" content="summary_large_image">. Use an absolute URL: relative ones are ignored by most crawlers.
- My headline is long. Will it fit?
- Yes — the type shrinks until it fits, down to four lines. Shorter is still better: a link preview is read at a glance.
- How do I add my logo?
- Add it as the picture and choose Small, in the corner. It is drawn in the bottom-left corner, 84 pixels in from the edges, at up to 101 × 101 pixels with its proportions kept, and the headline keeps the full width. A logo with a transparent background (PNG) sits best on the colours.
- I changed the image but the old preview still shows. Why?
- Sites keep a copy of a link’s preview for a while after they first see it. Upload the new PNG under a new file name and point og:image at that address, so the next share fetches it as a new picture.
- Is anything uploaded?
- No. The card is drawn on the page and the PNG is made in your browser.