Home›Generators›Developer Tools›OG Image Generator

OG Image Generator

Developer Tools

Generate a 1200×630 Open Graph image for social sharing previews. Enter a title and subtitle, pick your colours, and download as PNG instantly.

Reviewed by the thecalcu.com team · Last updated July 25, 2026

What is a OG Image?

An OG Image Generator creates the preview image shown when a page is shared on social media, sized at the standard 1200×630 pixels that Facebook, LinkedIn, X, and most other platforms expect for link previews. A compelling preview image with a clear title is often the single biggest factor in whether someone actually clicks a shared link, making it one of the highest-leverage small design assets on any website.

This generator lets you create a clean, branded title-and-subtitle image without opening a design tool, with your own background, text, and accent colours. It pairs directly with the Open Graph & Twitter Card Generator, which generates the meta tags that reference this image on your page.

Why Use an OG Image Generator?

Pages without a custom OG image either show no preview at all when shared, or fall back to a generic site logo that doesn't communicate what the specific page is actually about, both result in less compelling, less clickable shared links. Designing a proper social preview image in a full design tool, while not difficult, is a repetitive task if you need one for every blog post, product page, or article.

This generator handles the repetitive part, getting the exact dimensions and a clean title-and-subtitle layout right, so you only need to swap in new text and colours for each page. A blogger publishing regularly, or a small team without dedicated design resources, can produce a decent, on-brand preview image for every new page in under a minute.

Who Should Use This Generator?

  • Bloggers and content creators who want a custom, on-brand preview image for every new post without using a full design tool each time.
  • Developers and indie hackers launching a new site or product who need a quick OG image for social sharing.
  • Small businesses without a dedicated designer who still want professional-looking link previews when their pages are shared.
  • Marketing teams producing OG images at scale for multiple landing pages or campaigns.
  • Anyone setting up Open Graph and Twitter Card meta tags for the first time who needs the actual image to go with them.

What Insights Does the OG Image Generator Give You?

The generator shows you exactly how your social preview will look before you publish it:

  • Live preview, see the image update instantly as you adjust the title, subtitle, or colours.
  • Automatic text wrapping, long titles and subtitles wrap across multiple lines automatically, so you can see exactly how the text will actually fit before downloading.
  • Standard dimensions guaranteed, the output is always exactly 1200×630 pixels, the size most platforms expect, so you don't need to manually verify or resize afterward.

How to use this OG Image calculator

  1. Enter your page's Title, keep it concise for the cleanest layout.
  2. Enter a Subtitle that adds context or a short description.
  3. Set your Background, Text, and Accent colours using hex codes.
  4. Review the live preview to confirm the layout and text wrapping look right.
  5. Click Download PNG (1200×630) and upload the image to your website's hosting.
  6. Reference the image's URL in your page's og:image meta tag, using the Open Graph & Twitter Card Generator if you need help with the full tag set.
Show formula & methodology ↓Show less ↑

Formula & Methodology

The generator renders directly onto an HTML canvas at a fixed 1200×630 size: a solid background colour, a vertical accent bar and decorative accent circle, followed by the title (wrapped across up to three lines) and subtitle (wrapped across up to two lines), both left-aligned with consistent margins.

Example: entering the title "10 Tips for Better Sleep" with a dark navy background, white text, and blue accent produces a 1200×630 PNG with the title in large bold text near the top-left, the subtitle below it in a lighter weight, and a blue accent bar along the left edge, ready to use as your page's social sharing preview.

Frequently Asked Questions

What is an OG image?
An OG (Open Graph) image is the preview picture shown when a link is shared on platforms like Facebook, LinkedIn, X (Twitter), Slack, or WhatsApp. It's pulled from a page's `og:image` meta tag and is often the single biggest factor in whether a shared link actually gets clicked.
Why is 1200×630 the standard OG image size?
1200×630 pixels is the dimension recommended by Facebook and widely adopted across other platforms, giving a roughly 1.91:1 aspect ratio that displays cleanly across most social platforms' link preview cards without awkward cropping. Using a different size risks your image being cropped unpredictably on some platforms.
How do I actually add this image to my website?
After downloading the PNG, upload it to your website's hosting (or image CDN), then reference its URL in your page's `<head>` using a meta tag like `<meta property="og:image" content="https://yoursite.com/path/to/image.png">`. The [Open Graph & Twitter Card Generator](/og-meta-tag-generator/) can help generate the full set of meta tags.
Will this image work for Twitter/X cards too?
1200×630 also works well for Twitter/X's 'summary_large_image' card type, which is the most common card format used for link previews on the platform. The same image can serve both Open Graph and Twitter Card purposes.
Why does my title get cut off in the preview?
This generator wraps your title across up to three lines and your subtitle across up to two, but extremely long text may still run out of space at the 64px title font size. Keep titles concise, under around 60 characters works best for a clean single or double-line layout.
Can I use my own brand colours?
Enter any hex colour codes for the background, text, and accent colour fields, and the preview updates instantly so you can match your brand's visual identity before downloading.
What's the difference between this and the Placeholder Image Generator?
The [Placeholder Image Generator](/placeholder-image-generator/) creates a generic filler image at any custom dimension for layout testing, while this OG Image Generator is purpose-built for the specific 1200×630 social sharing format, with a title-and-subtitle layout designed for that use case.
Do I need a different OG image for every page on my site?
Ideally yes, a unique OG image per page (especially for blog posts or product pages) gives a more relevant and compelling preview than a single generic site-wide image reused everywhere. This generator makes it quick to produce a new one for each page as needed.
Is my title or design choice uploaded anywhere?
No, the image is generated entirely in your browser using the HTML canvas API. None of your inputs are sent to a server or stored.
Can I test how my OG image actually looks when shared?
Yes, after adding the image and meta tags to your live site, use a social platform's official debugging tool (such as Facebook's Sharing Debugger or X's Card Validator) to preview exactly how the shared link will appear before sharing it publicly.
Also known as
open graph image generatorsocial share image makertwitter card image generator1200x630 image generatorsocial preview image generator