DD DevDome Track. Protect. Grow.

OG Image Generator

Type a title, pick colors, add your site name and logo, and download a 1200x630 Open Graph image for link previews on every platform. Drawn on a canvas in your browser; nothing is uploaded.

Preview (1200 x 630)

How to use it

  1. Enter the title and an optional second line and site name.
  2. Pick the background and text colors, or load a background photo and your logo.
  3. Press Download PNG, upload the file to your site and set it as og:image.

The image that decides whether a link gets clicked

When a page is shared, the platform shows its Open Graph image at roughly the size of a phone screen, next to the title. A page without one gets a grey box or a random image from the content, and far fewer clicks. Most sites never make one because it needs a design tool and a template; this page is the template.

The generator keeps the title inside a safe margin, wraps it at the right width, darkens a background photo so white text stays legible, and exports a PNG at exactly 1200 by 630 pixels, the size that every platform accepts without cropping.

OG image FAQ

Why 1200x630?

It is the size Facebook, LinkedIn and most link previews recommend: a 1.91:1 aspect ratio that displays without cropping and is sharp on high-density screens. X (Twitter) summary cards with a large image use the same ratio. One 1200x630 image covers every major platform.

How do I add the image to my page?

Upload the PNG to your site, then add two tags in the head: meta property="og:image" with the absolute URL, and meta name="twitter:card" content="summary_large_image". WordPress SEO plugins have a field for it per post. Check the result with the Meta Tag & OG Checker, which shows the real image size the crawler sees.

The preview looks different on the platform. Why?

Platforms cache the first image they fetched for a URL. After changing it, use the platform's debugger (Facebook Sharing Debugger, LinkedIn Post Inspector) to refresh, or change the image file name. Keep the title inside the safe area: some previews crop a little from the edges, which is why the generator keeps a margin.

Can I use my own font or a photo background?

You can load a background image (it is covered to fill 1200x630 and darkened so the text stays readable) and a logo. Fonts are the system font stack so the image renders the same for everyone; a custom font would need a font file and that is outside what this tool does.

Is anything uploaded?

No. The image is drawn on an HTML canvas in your browser and the PNG is created there. Your title, logo and background never leave your device.