SwipeToLaunch
Add your product

Open Graph image generator

1200×630 share images with title, logo and colors, as PNG.

How to use it

  1. Write the title. The page title or a sharper hook. Long titles shrink and wrap to fit.
  2. Add brand details. Subtitle, domain, colors or a gradient, and your logo if you have one.
  3. Pick a layout and download. Left aligned, centered or split with a logo panel. Save as PNG.

Why every page needs a share image

When someone pastes your link into X, LinkedIn, Slack, iMessage or Discord, the preview card is built from your Open Graph tags. Without an og:image, you get a grey box or a random image from the page, and far fewer clicks. A clear image with the page title is the cheapest way to make shared links look intentional.

The right size

Use 1200 × 630 pixels (a 1.91:1 ratio). It is what Facebook and LinkedIn recommend, and X uses the same ratio for summarylargeimage cards. Keep important text away from the outer 60 pixels or so, because some apps crop the edges or round the corners. Keep the file under 5 MB; a PNG from this tool is usually a few hundred KB.

What makes a good OG image

  • Big, short text. It shows at around 500 px wide in most feeds, smaller on phones. Six to ten words is plenty.
  • High contrast. Dark on light or light on dark; avoid busy photos behind text.
  • Your brand, small. A logo or domain in the corner tells people where the link goes.
  • One template for the site. Same layout and colors with a different title per page builds recognition.

Adding it to your page

Upload the PNG to your site and add these tags to the page's <head>:

<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

The Open Graph generator writes the full set of tags, and the Open Graph checker shows how a live URL will look when shared. Social apps cache previews, so after changing an image, use each platform's post inspector to refresh it.

What you get

  • 1200 × 630 PNG, the size every major platform uses
  • Three layouts: left, centered and split with logo panel
  • Solid or gradient backgrounds with an accent color
  • Logo upload processed locally, never uploaded
  • Titles auto-fit and wrap to three lines

Questions

What size should an Open Graph image be?

1200 × 630 pixels, a 1.91:1 ratio. It displays well on Facebook, LinkedIn, X, Slack and most messaging apps. Smaller images may show as a small thumbnail instead of a large card.

Is the OG image the same as the Twitter card image?

It can be. X reads og:image when there is no twitter:image tag. Set twitter:card to summary_large_image to get the large preview.

Why does my old image still show when I share the link?

Platforms cache previews. Use the LinkedIn Post Inspector or Facebook Sharing Debugger to force a refresh, and give the new image a new file name if needed.

Is my logo uploaded anywhere?

No. The image file is read by your browser with FileReader and drawn on a canvas on your device. Nothing is sent to a server.