OG Image Generator (1200×630 social card)
Design Open Graph and Twitter Card images at the canonical 1200×630 size. Title, subtitle, brand colors, gradient or solid background, optional logo. Live preview, instant 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 brand colors, choose a solid or gradient 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 image cuts CTR by 40-60%; a low-quality or wrongly-cropped one is barely better. 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 background style (solid color, two-color gradient) and adjust colors
Set text colors and font weight; preview shows the exact rendering you'll get in the PNG
Optionally upload a logo (PNG / SVG / JPG) — it appears in a corner you choose
Add a domain or 'small caps' label across the bottom for branding
Click Download PNG — the file is saved at exactly 1200×630 pixels, ready to upload to your CDN
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
The single image size that satisfies LinkedIn (1200×627 minimum), Facebook (1200×630), Twitter summary_large_image, and Slack — 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 or gradient backgrounds
Pick a single color or a two-color gradient with adjustable angle. Both render at full image quality with no banding.
Title + subtitle + label layout
Three-tier text hierarchy: large title, medium subtitle, small label/domain. Each with adjustable color, font weight, and alignment.
Optional logo upload
Drop in a logo image (PNG / SVG / JPG) and place it in any corner. The logo respects transparent backgrounds and scales with the canvas.
Instant PNG download
Generate via 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 (zero outbound network requests).
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; building the same template for each in Figma 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.
Output PNG matches the preview pixel-for-pixel; both render via 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 the only single dimension that satisfies all major platforms simultaneously: LinkedIn requires ≥1200×627, Facebook recommends 1200×630, Twitter's summary_large_image card uses 1200×675 (and accepts 1200×630 with minimal cropping), Slack and Discord are flexible. Smaller images get rendered as thumbnails instead of large cards, dramatically lowering click-through.
What font does it use?
System sans-serif by default (Inter / SF Pro / Segoe UI / etc., depending on your OS), rendered at the OS level. We chose this over web fonts because system fonts are guaranteed to render identically on the canvas as in the preview, with no font-loading delays. If you need a specific brand font, build the template here, then post-process the PNG in Figma.
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 30-150 KB for solid/gradient backgrounds with text and a logo. PNG quality is fixed (browsers don't expose a quality knob for canvas.toBlob). For sites concerned about page weight, consider running the downloaded PNG through a separate image optimizer (squoosh, tinypng) which can drop the size 30-50% with no perceptible quality loss.
Does the logo upload get sent anywhere?
No. The logo file 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 DevTools network tab — uploading a logo and downloading produces zero outbound requests with the file.
Why isn't there a templates / style picker?
Deliberately kept minimal so the output looks consistent and brand-able rather than 'AI-generated card #47 from a generic library'. The combination of title font weight + gradient angle + logo position + colors gives enough room to look distinct without needing 30 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 pixel-identical because both come from the same canvas.toDataURL pipeline.
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 or two-color linear gradient with adjustable angle
- ✓Text: title + subtitle + label, each with color, weight, alignment
- ✓Logo upload: PNG, SVG, JPG (transparent backgrounds preserved)
- ✓Logo position: top-left, top-right, bottom-left, bottom-right corners
- ✓Font: system sans-serif (Inter / SF Pro / Segoe UI)
- ✓Live preview at canvas dimensions
Limits & Performance
- •File Size: Logo upload up to ~5 MB (limited by browser FileReader); PNG output typically 30-150 KB
- •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 SVG or transparent PNG 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.