OG Image Generator
Build a 1200×630 social share image in your browser
Type a title, subtitle, and brand name — get a 1200×630 PNG ready for og:image, twitter:image, and LinkedIn previews. Live preview, one-click download.
Need a website that actually converts?
Hand-coded sites + landing pages + MVPs. Free 30-min strategy call.
What is an OG Image Generator?
When a link is shared on Twitter, LinkedIn, WhatsApp, or Slack, the platform fetches the page's `og:image` meta tag and renders it as a card. Pages without one show a small generic thumbnail or no preview at all — and click-through rates drop sharply. Most static sites and blogs miss this entirely.
This tool builds a 1200×630 PNG (the universal Open Graph size) directly in your browser using HTML Canvas. Type a title, subtitle, brand name; pick a background and accent colour. The preview updates live, then download with one click. The PNG goes into your `/public` folder and you reference it in your `<head>` via `<meta property="og:image" content="/og-image.png" />`.
No signup, no rate limits, no watermark. The output is yours to use commercially — internal docs, blog posts, marketing pages, anywhere you control the meta tags.
Why use this OG Image Generator
Built for Indians, by Indians. Every number, every formula, every slab — tuned to FY 2026-27 reality.
Live preview
Edit fields and the preview re-renders in real time on a 1200×630 canvas.
One-click PNG
Download the generated image as a high-quality PNG ready to upload to your CDN or `/public` folder.
Custom colours
Pick background and accent — match your brand without firing up Figma.
Auto text wrapping
Long titles wrap automatically across multiple lines — no clipping, no awkward cutoffs.
Fully browser-side
Canvas API runs locally. No server, no upload, no third-party logo policy to worry about.
Using the OG Image Generator in 4 steps
No onboarding, no signup. Answer three fields and the numbers update live.
Type your title
The main headline. 8-12 words is the sweet spot — short enough to read at a glance, long enough to be specific.
Add subtitle and brand
A short tag plus your site/brand name. Helps anchor the share visually.
Pick background + accent
Use your brand palette. Avoid pure white — most platforms render it on a white feed and it disappears.
Download and reference
Click "Download PNG", drop the file in `/public/og.png`, add `<meta property="og:image" content="/og.png">` to your `<head>`.
Tips to get the most out of it
Twitter shows OG images at 1200×630 with letterboxing if the aspect ratio is off. Stick to exact 1200×630 — never 1600×900 or anything else "close enough".
Test your OG image with the Twitter Card Validator and LinkedIn Post Inspector before going live. Both cache aggressively — set the right URL the first time.
For dynamic OG images (e.g. one per blog post), this tool is fine to start, but graduate to a runtime generator (Vercel `@vercel/og`, Cloudinary) when you have more than ~20 pages.
Make sure your text contrasts strongly with the background. Aim for 7:1 contrast — share platforms render in dark mode, light mode, on phones, on TVs.
Real-world scenarios
How Indians actually use this generator — concrete inputs, concrete outcomes.
Blog post launch
Writer launches a 3,000-word guide on GST registration. Generates an OG image with the post title and "Bizeract Guide" branding. Tweet impressions on the launch double vs. previous posts that had no card.
Landing page A/B test
Marketing tests two OG images for the same page — one minimal, one branded. Checks click-through from Twitter ads. Branded card outperforms by 31%.
Internal docs
Engineering team uses the tool to generate share cards for their internal Notion docs. Now Slack-shared links show contextual cards instead of bare URLs — discoverability improves across the team.
Frequently Asked Questions
Still have a question? Our team replies within a business day.
It is the size Facebook, Twitter, LinkedIn, and WhatsApp all crop to. Anything else gets letterboxed or cropped, often badly.
Not in this version — the tool is designed for fast text-based cards. For logo overlays, use a runtime OG image library (e.g. Vercel's @vercel/og).
PNG is the default for OG — it has lossless compression and full alpha. Twitter and LinkedIn both convert internally anyway, so PNG is the safest choice.
Yes. Use `<meta name="twitter:card" content="summary_large_image">` plus `<meta name="twitter:image" content="...">` and Twitter will render the same 1200×630 PNG as a large card.
Yes. Once the page loads, all rendering runs client-side. Reload offline and it still works.
Want expert help beyond the generator? Talk to our team.
Our finance team helps Indian businesses and individuals plan investments, file taxes, and build wealth — without the jargon.
Book a free consultationLet's talk about your business.
Tell us what you're working on and where you want to go. We'll put together a plan. No obligation, no sales pitch.
- Free 30-minute call
- A plan built around your goals
- No obligation, no pressure
- Your own account manager