# OG Image Generator

> Design a 1200×630 Open Graph image with your title, subtitle, logo and colors in three layouts, then download a PNG. Your logo never leaves your device.

Use it free at https://swipetolaunch.com/tools/og-image-generator

## 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 summary_large_image 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>`:

```html
<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](/tools/open-graph-generator) writes the full set of tags, and the [Open Graph checker](/tools/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.