What size does this generator export?

Every image is 1200 by 630 pixels. That is the Open Graph size Facebook, LinkedIn, Slack, Discord, and WhatsApp expect for a large link preview.

Is the OG image generator free?

Yes. It runs in the browser. There is no account and no watermark on the PNG.

Are the images stored?

No. The PNG is drawn on this page and downloaded to your machine. Nothing is uploaded.

Can I use my own logo?

Yes. Drop a PNG, JPEG, WebP, or GIF. The file stays in the browser. A remote URL is drawn only when the host allows canvas access.

How do I use this in a Next.js app?

Copy the opengraph-image.tsx file into the App Router segment that should own the preview. Next.js serves that file as the page's og:image.

How do I check that a platform picked up the image?

Deploy the page, then paste its URL into the Facebook Sharing Debugger and the LinkedIn Post Inspector. Those caches ignore a normal reload until you ask them to scrape again.

OG image generator

Compose a 1200×630 card, watch it update, then download the PNG or copy the Next.js file.

In Template, title, subtitle, author, colors, font, and an optional logo file./Out A 1200×630 PNG, meta tags, and an opengraph-image.tsx file.

Runs locally

Template

Title

Subtitle

Author

Background

Text

Accent

Drop a logo. It stays in this browser.

1200 × 630

opengraph-image.tsx

1import { ImageResponse } from "next/og";

3export const alt = "Ship the note people actually share";

4export const size = { width: 1200, height: 630 };

5export const contentType = "image/png";

7export default function Image() {

8 return new ImageResponse(

9 (

10 <div

11 style={{

12 width: "100%",

13 height: "100%",

14 display: "flex",

15 flexDirection: "column",

16 justifyContent: "flex-end",

17 background: "oklch(0.22 0.02 260)",

18 color: "oklch(0.96 0.005 95)",

19 fontFamily: "Geist",

20 padding: "64px",

21 }}

22 >

23 <div style={{ display: "flex", fontSize: 22, letterSpacing: 4, color: "oklch(0.68 0.16 262)" }}>

24 "BLOG"

25 </div>

26 <div style={{ display: "flex", marginTop: 24, fontSize: 68, fontWeight: 650, lineHeight: 1.02, letterSpacing: -2 }}>

27 "Ship the note people actually share"

28 </div>

29 <div style={{ display: "flex", marginTop: 18, fontSize: 28, opacity: 0.78 }}>

30 "A 1200×630 card with a title you can still read in the preview."

31 </div>

32 </div>

33 ),

34 { ...size },

35 );

36}

How to use it

1Pick a templateChoose blog, product, minimal, gradient, code, or profile. Each starts with its own type and color.
2Tune the cardSet the title, subtitle, author, font, and colors. A logo is optional and stays on this page.
3Download or copyDownload the 1200×630 PNG or copy the Next.js file and meta tags for the template you picked.