🖼️ Open Graph Image Builder

Design a 1200×630 social card with title, subtitle, gradient background, and logo. Export as PNG, or copy to clipboard.

Templates:
🎨 Custom gradient
✨ Pattern (decoration)
🖼️ Logo / icon (optional)
Drop PNG, SVG, or JPEG — or click
Position
1200 × 630 px

About the OG Image Builder

Design a 1200×630 social-card image — the standard Open Graph and Twitter summary-large-image size — directly in your browser. Pick a gradient or solid background, type a title and subtitle, drop in a logo, and the canvas re-renders live. Export as PNG when you're happy.

How to use

  1. Start from a template (Minimal, Bold, Classic), or work from scratch.
  2. Edit the title and subtitle — the canvas auto-shrinks the title to fit the safe area if it gets too long.
  3. Pick a gradient tile, or switch to Solid for a flat color.
  4. Optionally drop in a logo (PNG, SVG, or JPEG) and pick a corner.
  5. Click Download PNG — save as og-image.png and reference it from your <meta property="og:image"> tag.

Common use cases

  • A custom card for a blog post, side project, or release announcement.
  • A consistent OG image across every page of a small site (vary only the title).
  • A throw-away card for a one-off campaign or share-the-news Slack thread.
  • Iterating on cover art before committing time to a designed-from-scratch version.

Tips

  • Keep titles under ~50 characters — the auto-shrink can only do so much before legibility suffers at thumbnail size.
  • Drop-shadow helps the title pop on busy gradient backgrounds; switch it off for flat color cards.
  • SVG logos render crisply at any size; PNG logos look best when their native size is ≥ the display size.
  • After exporting, run the PNG through the image compressor — most OG PNGs shave 30–60% with no visible loss.

FAQ

What's an Open Graph image and why does size matter?
It's the preview image social platforms (Facebook, LinkedIn, X/Twitter, Slack, Discord, …) show when someone shares your link. 1200×630 is the standard Open Graph and Twitter summary-large-image size — using it avoids cropping or pixelation across platforms.
Does my image ever leave my browser?
No. The canvas is rendered locally and exported via canvas.toBlob — there's no upload, no server, no third-party API. Even the logo you drop in is read with FileReader and never transmitted.
Why are only a few fonts offered?
Canvas can only render fonts the device has installed (or that this page loads). We expose the two web-fonts this site already ships (Bricolage Grotesque, IBM Plex Mono) plus Georgia (universally installed) so the exported PNG matches the preview on every machine.
What does 'auto-shrink' do to long titles?
If a title overflows the safe area (60 px inset on all sides), the renderer steps the font size down in 4 px increments until it fits or hits a sensible minimum. For very long titles, also enable word-wrap or split with a manual line break.
Why might Copy image fail?
Browsers only allow image clipboard writes from a user gesture, and only on https / localhost. Firefox in particular gates image/png clipboard writes behind a flag in older releases. If the copy fails, use Download PNG — it works everywhere.

More tools

JSON

Code

Ornaments

Image

Web / SEO

Generators

PDF