BYTETOOLS

Open Graph Image Generator

Design a 1200 x 630 Open Graph or Twitter card image in your browser and copy the matching og:image and twitter:image meta tags.

72
Optional: drop a logo (PNG with transparency works best)Everything is drawn on a canvas in your browser — nothing is uploaded

Meta tags for your <head>

<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="How to ship a fast website in 2026">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/og-image.png">

What is the Open Graph Image Generator?

When a link is shared on LinkedIn, Slack, Facebook, WhatsApp or X, the preview image does more for the click-through rate than the title does.

  • Open Graph 1200 × 630, Twitter 1200 × 675 and square 1080 × 1080 presets
  • Headline wrapped by real canvas text measurement, never clipped
  • Solid, linear-gradient or gradient-plus-noise backgrounds with four colour controls
  • Optional logo, eyebrow line, subtitle and accent bar with left or centred alignment
  • PNG or JPEG export with the live file size shown
  • Copyable og:image, og:image:width/height, og:image:alt and twitter:image tags

How to use the Open Graph Image Generator

  1. 1

    Pick a size preset — 1200 × 630 for Open Graph, 1200 × 675 for a large Twitter card, or a square.

  2. 2

    Type your headline, subtitle and eyebrow line; the headline wraps automatically over up to four lines.

  3. 3

    Choose a background style and set the gradient, text and accent colours.

  4. 4

    Optionally drop in a logo, then adjust the headline size slider until it sits well.

  5. 5

    Download the image, then paste your hosted URL into the field below and copy the meta tags.

About the Open Graph Image Generator

When a link is shared on LinkedIn, Slack, Facebook, WhatsApp or X, the preview image does more for the click-through rate than the title does. This generator draws that image on a canvas at the exact sizes those platforms expect, with your headline word-wrapped by real text measurement so it always fits the frame.

You control the background — a solid colour, a linear gradient or a gradient with a subtle film-grain texture — plus an eyebrow line, a headline, a subtitle, an accent bar and an optional uploaded logo. Everything redraws instantly as you type, so you can iterate on wording without leaving the page.

Export as PNG for crisp text or JPEG for a smaller file, then copy the ready-made meta tags including the width and height hints that stop platforms guessing. All drawing happens on a canvas in your browser, so your logo and copy are never uploaded anywhere.

Frequently asked questions

What size should an Open Graph image be?

1200 × 630 pixels is the safe standard and is what Facebook, LinkedIn and Slack all crop from. Twitter's summary_large_image card prefers 1200 × 675, which is why both presets are here.

Do I need a separate Twitter image and og:image?

Usually not — if you omit twitter:image, X falls back to og:image. Providing both lets you match each platform's aspect ratio exactly, which avoids awkward cropping of your headline.

Why is my social preview not updating after I changed the image?

Platforms cache previews aggressively. Change the file name or add a query string, then re-scrape the URL with the platform's own debugger, and the new image will appear.

Should the og:image be a PNG or a JPEG?

PNG keeps text perfectly sharp and is the better default for a card that is mostly type. Choose JPEG when a photographic background makes the PNG heavy, since a smaller file scrapes and loads faster.

Is my logo uploaded when I use this generator?

No. The logo is drawn onto a canvas inside your browser and the finished image is exported locally, so neither the logo nor your copy is sent anywhere.

Related tools