OG Image Generator (1200×630 social card)
Design Open Graph and Twitter Card images at the canonical 1200×630 size. Title, subtitle, brand colors, six layouts, solid, gradient or image background, optional logo. Live preview, PNG download — pairs with the OpenGraph Preview tool.
Layout
Title vertically centered. Clean default.
Text
Colors & background
Logo (optional)
Preview (1200×630)
Preview is the canvas at full 1200×630 dimensions, scaled to fit your screen. The downloaded PNG matches pixel-for-pixel.
About OG Image Generator (1200×630 social card)
The OG Image Generator builds 1200×630 PNG images for the og:image / twitter:image meta tags — the picture every social platform shows when your link is shared. Type a title and subtitle, pick a layout and brand colors, choose a solid, gradient or image background, optionally upload a logo, and download a polished social card in seconds. The preview is rendered with the exact pixel dimensions you'll get in the file, so what you see is what you ship. Pairs perfectly with the OpenGraph Preview tool: design here, validate there.
Why use a OG Image Generator (1200×630 social card)?
A great og:image is the single biggest factor in whether a shared link gets clicked. A missing or poorly cropped image makes a shared link far less eye-catching. Most teams either commission custom Figma designs (slow, expensive) or ship a generic logo that bores people (low CTR). This tool sits in the middle: clean, brand-consistent, designed for the canonical 1200×630 dimension that satisfies LinkedIn, Facebook, Twitter (large card), and Slack — in under a minute. No Figma, no design back-and-forth, no third-party service touching your text.
Who is it for?
Built for content marketers shipping blog posts and landing pages, indie hackers and solo founders who need brand-consistent share images without a designer, technical writers publishing release notes that need OG images, product managers preparing launch posts for X / LinkedIn, and developers building static-site templates that need an `og:image` per page. Anyone who has ever opened Figma to make a single 1200×630 image should bookmark this.
How to use the tool
Type your title and subtitle in the form on the left — the preview updates live
Pick a layout (Centered, Banner, Split, Hero, Bordered or Quote), then a background style (solid color, two-color gradient, or an uploaded image with an overlay) and adjust colors
Set text colors, the title font weight and the text alignment; the preview shows the exact rendering you'll get in the PNG
Optionally upload a logo (any image your browser can open) — it appears in a corner you choose, at a size you set
Add a domain or label (shown in capitals) for branding
Click Download PNG — the file is saved at exactly 1200×630 pixels, ready to upload to your site
Update your page's og:image meta tag to point at the uploaded URL, then validate with the OpenGraph Preview tool
Key Features
Canonical 1200×630 output
A single image size that works for LinkedIn (1200×627 minimum), Facebook (1200×630), Twitter summary_large_image, and Slack in most cases — no per-platform variants needed.
Live preview at exact pixel dimensions
What you see in the preview is what you get in the PNG. No surprises after download.
Solid, gradient or image backgrounds
Pick a single color, a two-color gradient with adjustable angle, or upload a background image (cover or contain) with a color overlay to keep text readable.
Six layouts, three text levels
Three-tier text hierarchy: large title (up to 4 lines), medium subtitle (up to 3 lines), small label/domain. Each has its own color; the title has an adjustable font weight, and alignment applies to all text.
Optional logo upload
Upload a logo image and place it in any corner with an adjustable size (the Hero layout shows it as a centered badge). Transparent backgrounds are kept.
Instant PNG download
Generated with a canvas in your browser; download as a real 1200×630 PNG file with the exact rendering shown in the preview. No watermarks, no upload, no account.
100% client-side
Image generation runs in your browser via the Canvas API. Your text, logo, and design never leave the device — verifiable in DevTools.
Common Use Cases
Hero image for a blog post launch
Scenario: You're publishing a blog post and need an og:image that looks distinctive in LinkedIn / X feeds.
✓ Type the post title, add your domain as the bottom label, pick brand-colored gradient. Download, upload to CDN, paste URL in the post's og:image meta. Five minutes total.
Brand-consistent images across a static site
Scenario: You have 30 blog posts with no og:images; designing each one by hand would take a week.
✓ Build the template here once, then iterate per-post by changing only the title — same colors, same layout, same logo. Each download takes 30 seconds.
Launch image for a product or feature
Scenario: You're launching a feature and want a polished image for the announcement tweet/post.
✓ Set the feature name as the title, a one-line description as subtitle, your product logo in the corner. Looks polished without a designer round-trip.
Replacing a missing or cropped og:image
Scenario: The OpenGraph Preview tool flagged that your og:image is too small (renders as small thumbnail instead of large card).
✓ Generate a 1200×630 replacement here, swap the og:image URL, re-validate in OpenGraph Preview — large card now shows on every platform.
Multi-language site og:images
Scenario: Your site ships in English, French, and Spanish; each language's pages need its own translated og:image.
✓ Build the template once, swap the title text per language. Three downloads, same brand consistency.
The output PNG matches the preview; both are drawn on the same canvas.
100% client-side — your text, logo, and design never leave the device. No upload, no API call.
Static site — no backend dependency.
Frequently Asked Questions
Why exactly 1200×630?
It's a single dimension that works well on all major platforms: LinkedIn requires ≥1200×627, Facebook recommends 1200×630, Twitter's summary_large_image card uses a 2:1 crop (so 1200×630 is cropped slightly), Slack and Discord are flexible. Smaller images get rendered as thumbnails instead of large cards, dramatically lowering click-through.
What font does it use?
A system sans-serif stack (SF Pro, Segoe UI, Roboto, etc., depending on your OS), so the look varies a little between operating systems; the Quote layout uses a serif (Georgia). System fonts render identically on the canvas as in the preview, with no font-loading delays. There is no custom font option, so if you need a specific brand font, use the downloaded PNG as a base and add the text in a graphics editor.
Can I use this for Twitter summary cards (small)?
Yes — the small summary card uses 144×144 minimum, but a 1200×630 image gets cropped to a square thumbnail by Twitter for that variant. To control which Twitter card variant your link shows, set the twitter:card meta tag to 'summary_large_image' (not just 'summary'). The OpenGraph Preview tool shows both rendering options.
How big is the output PNG?
Typically small for solid/gradient backgrounds with text and a logo, and larger with a photo background. PNG quality is fixed (browsers don't expose a quality knob for canvas.toBlob). For sites concerned about page weight, you can run the downloaded PNG through an image optimizer, or convert it to a smaller format, before uploading.
Does the logo upload get sent anywhere?
No. The logo file (and any background image) is read into a browser canvas via FileReader (a local-only API), composited onto the image, and the result is downloaded — all in-process. Verifiable in the DevTools network tab — the file is never sent anywhere.
Are there templates or a style picker?
There are six layouts (Centered, Banner, Split, Hero, Bordered and Quote) but no library of pre-made designs. The combination of layout, title font weight, background (solid, gradient or image), colors and logo position gives enough room to look distinct without needing dozens of templates that all start to look the same.
Will the PNG look identical to the preview?
Yes — the preview is rendered at the same 1200×630 canvas as the download (just CSS-scaled to fit your screen). Text rendering, gradients, and logo positioning are identical because the preview and the download are drawn on the same 1200×630 canvas.
How does this pair with the OpenGraph Preview tool?
Designed for it: build your image here, upload to your CDN, set the og:image meta, then run your URL through the OpenGraph Preview tool to verify it renders correctly across X, LinkedIn, Facebook, Slack, and Discord. The two tools together cover the full design → ship → verify workflow.
Technical Specifications
Supported Formats
- ✓Output: 1200×630 PNG via Canvas API
- ✓Background: solid color, two-color linear gradient with adjustable angle, or uploaded image with overlay; six layouts
- ✓Text: title + subtitle + label, each with its own color; title weight and alignment adjustable
- ✓Logo upload: any image format the browser can open (transparent backgrounds preserved)
- ✓Logo position: top-left, top-right, bottom-left, bottom-right corners
- ✓Font: system sans-serif (SF Pro / Segoe UI / Roboto); serif in the Quote layout
- ✓Live preview at canvas dimensions
Limits & Performance
- •File Size: PNG size depends on the background: small for solid and gradient backgrounds, larger with photo backgrounds
- •Validations: Live preview re-renders on every change
- •Response Time: Synchronous canvas render; PNG export ~50-200ms
- •Browsers: All modern browsers (Chrome, Firefox, Safari, Edge); works offline once loaded
Pro Tips
- Keep the title to 5-8 words. Anything longer wraps awkwardly on platforms with smaller render sizes (Slack thumbnails especially).
- Make sure the title color has at least 4.5:1 contrast against the background — light gray on light backgrounds is the most common og:image readability mistake.
- Reserve the bottom 60-80px for your domain or logo. This area is most consistently visible across every platform's crop.
- Avoid putting critical info at the very edges of the image. Different platforms crop differently (especially Discord, which uses a roughly 16:9 crop on small screens).
- Use one bold accent color rather than multiple competing colors — single-color gradient against a darker base color reads cleanly at small thumbnail sizes.
- When uploading a logo, prefer a transparent PNG (or SVG) over JPG. JPG logos with white backgrounds clash with non-white image backgrounds.
- After uploading the PNG to your CDN, run the page URL through the OpenGraph Preview tool to verify it renders large-card style across all five platforms before announcing the launch.
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
💡 Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.