OG image generator

Type a headline, pick a colour, add your logo and download a 1200×630 PNG for og:image. Everything happens in your browser.

1200 × 630 PNG

Colour
Layout

Design rules for an image that survives every platform

  • Keep the words big. Cards are shown around 500px wide on phones. A 76px headline on a 1200px canvas renders at about 32px on screen; anything under 40px on the canvas becomes unreadable.
  • Stay in the middle. Square crops (X summary cards, some WhatsApp and iMessage layouts) keep only the centre 630×630. The crop tester shows exactly what’s lost.
  • Don’t repeat the title as-is. The platform already prints og:title under the image. Use the image for a shorter hook, a product shot or a face.
  • High contrast. Feeds are busy and many people use dark mode. Pure white backgrounds blend into light feeds; a strong colour stands out.

Then add the tags with the meta tag generator and confirm it all with the OG checker.

Frequently asked questions

What size does the OG image generator export?

1200×630 pixels PNG, the 1.91:1 size Facebook, LinkedIn, X, Slack and Discord all display well. Files are usually 40–200 KB, well under every platform’s limit.

Is my image uploaded anywhere?

No. The card is drawn on a canvas in your browser and downloaded directly. Logos you add never leave your device.

How do I use the image once downloaded?

Upload it to your site or CDN, then set <meta property="og:image" content="https://yoursite.com/og.png"> with an absolute URL. The meta tag generator writes the full tag set for you.

Can I generate OG images automatically for every page?

Yes, with server-side tools such as @vercel/og (Satori) in Next.js or nuxt-og-image in Nuxt, which render a template per page at build or request time. This generator is for one-off cards and for designing the template you’ll automate.