OG Image Generator
Developer ToolsGenerate a 1200×630 Open Graph image for social sharing previews. Enter a title and subtitle, pick your colours, and download as PNG instantly.
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.
How to use this OG Image calculator
- Enter your page's Title — keep it concise for the cleanest layout.
- Enter a Subtitle that adds context or a short description.
- Set your Background, Text, and Accent colours using hex codes.
- Review the live preview to confirm the layout and text wrapping look right.
- Click Download PNG (1200×630) and upload the image to your website's hosting.
- Reference the image's URL in your page's
og:imagemeta tag, using the Open Graph & Twitter Card Generator if you need help with the full tag set.
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
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.
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.
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.
Yes — 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.
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.
Yes — 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.
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.
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.
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.
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