twittercard

Free tool

OG Image Maker

Type a title, choose a template and colors, and download a PNG sized for X, LinkedIn, Facebook and the rest.

Runs in your browser. Nothing you type, paste or upload is sent anywhere.

Keep the main words in the top two thirds: X lays the headline over the bottom-left of large image cards.

In one sentence

The OG image maker draws a title, a short kicker line and a domain on a canvas in one of four templates, fits the title to at most four lines, checks text contrast, and exports a PNG at 1200x630, 1200x675 or 1200x600.

How do I make an image?

Edit the fields on the left; the canvas redraws as you type. Press Download PNG when you like it.

  1. Write the title. Under 60 characters works best; the maker fits up to four lines.
  2. Add a short kicker such as "Guide", "Changelog" or a category, and a footer line, usually your domain.
  3. Pick a template: Gradient blends your background and accent colors, Split panel puts a colored block on the right (with your logo in it, if you add one), Paper is a light editorial look, and Code card frames the title like an editor window.
  4. Choose colors and a font. The contrast line under the form warns you when the title color is too close to the background.
  5. Download. The file name is built from the title.

Why generate card images at all?

A page without an image gets a small card or no card on most platforms, and a missing image is the most common reason a link post looks unfinished. For blog posts and docs where there is no natural photo, a tidy title card is a reasonable default. Many static site generators can produce these at build time; this tool is for the times you need one by hand, or want to design a template before automating it.

Design notes that hold up across platforms

Tip Reason
Keep the title in the top two thirds X lays the headline over the bottom-left of large image cards
Leave 60 to 80 pixels of margin Some apps round corners or crop slightly
Use big type, 56 pixels or more Cards are often shown at a third of their real size on phones
Avoid thin fonts on gradients Compression softens edges; bold type survives it
Do not repeat the site logo huge The domain is already shown under the card

Once you have the PNG, check it with the image checker if you want an exact 2:1 crop, upload it, and add its absolute URL with the card generator.

Questions

Which size should I download?

1200x630 if one image has to serve every platform. 1200x600 if you want an exact 2:1 for X large image cards. 1200x675 (16:9) if you also use the image in slides or video thumbnails.

Can I use the images commercially?

Yes. The templates and the bundled fonts (Sora, Red Hat Text and Fragment Mono, all under the SIL Open Font License) are fine to use in images for any site. Any logo you add is your responsibility.

Apple says to avoid text in preview images. Should I?

Apple's Messages guidance does suggest graphical images and letting metadata carry the text, because images are shown at different sizes. On X, a short, large title on the image tends to help. Keep it to a few big words and it reads well in both places.

Why does my title get smaller?

The maker shrinks the font in steps until the title fits in four lines, down to 40 pixels. If it still does not fit, it is cut with an ellipsis. Shorter titles look better anyway.

Related guides

Other tools