Skip to content
I Hate Online Tools

OG share image

1200×630 social card from headline + background.

This runs in your browser. Nothing is uploaded.

About OG share image

Builds a 1200 by 630 social share card from a headline, optionally over a background image that gets darkened for contrast, rendered on a canvas in your browser.

When someone pastes a link to your page into Slack, LinkedIn, iMessage or a group chat, the preview card comes from the og:image tag. With nothing there you get a bare grey box, which reads as either unfinished or faintly suspicious. The size the platforms settled on years ago is 1200 by 630 pixels, and they all crop inward from that as their layouts require.

This outputs exactly that. Type a headline and it is drawn in bold 64-pixel white type from the left margin, roughly at the vertical centre. Load a background image first and it is drawn to fill the full 1200 by 630 and then covered with a 45 percent black wash, which is what keeps white text legible over an arbitrary photo. With no background you get a flat dark card.

The headline is a single line with no wrapping, so somewhere past 40 characters it runs off the right edge and is clipped. Count the characters before you generate. There is no logo slot, no second line and no typeface choice either — if you want a templated card system with your brand on it, you have outgrown this and want a generated-image endpoint instead.

How to use OG share image

  1. 1Optionally drop a background image; it is filled to 1200 by 630 and darkened.
  2. 2Type your headline, keeping it under about 40 characters.
  3. 3Click Generate & download to save the PNG.
  4. 4Reference it from og:image and twitter:image on the page.

What it won't do

  • One line of text at a fixed size, with no wrapping or auto-fit.
  • Background images are stretched to 1200 by 630 rather than cropped to fit.
  • No logo, subtitle, colour or typeface options.

Common questions

What size should an OG image be?

1200 by 630 pixels, a 1.91:1 ratio, which is what this tool outputs. Facebook, LinkedIn, Slack and Twitter's large summary card all read that correctly. Going bigger gains nothing, because the platforms resample it anyway; going smaller or using another ratio earns you letterboxing or a centre crop you did not choose.

Do I need a separate Twitter card image?

No. One 1200 by 630 image referenced from both og:image and twitter:image is enough, as long as you also set twitter:card to summary_large_image. Leave that second tag out and Twitter falls back to a small square thumbnail, which crops a wide card down to its middle third.

Why is my background photo darkened?

Deliberately. A 45 percent black layer is painted over the background so the white headline stays readable whatever is underneath — bright skies and pale walls otherwise swallow the text entirely. If you want the photo untouched, generate the card with no background and composite the two yourself.

How long can the headline be?

Around 40 characters at the fixed 64-pixel size. The text is drawn as one line and is neither wrapped nor shrunk to fit, so anything longer runs past the right edge and is cut off. Write it as a headline rather than a sentence and you will stay comfortably inside the limit.

Related tools

Why this one doesn't upload your file

There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation

Install the app