About this tool
Links shared without an Open Graph image look broken: no card, no click. But firing up a design tool for every blog post or changelog entry is overkill. OG Image Generator builds a clean 1200 by 630 social card in seconds, right in your browser. Type a title and subtitle, pick your brand color, choose a gradient direction and a second tone, optionally add a corner badge — a version number, a date, a New label — and watch the canvas preview update live as you type. Typography is sized and wrapped automatically to fit the card, so long titles shrink gracefully instead of overflowing. When it looks right, one click exports a PNG at the exact 1200×630 size that Facebook, LinkedIn, X, Slack and Discord expect for their large-card previews. The file is rendered on a canvas element locally: nothing is uploaded, no template account, no watermark, no design-tool subscription. Pair it with the favicon generator and you can ship a whole page's visual metadata without opening an image editor once. Ideal for indie hackers, technical bloggers and documentation maintainers who need decent-looking share cards on a budget of zero minutes per post.
How to use OG Image Generator
- Type the title and subtitle for the card; the canvas preview updates as you type.
- Pick brand colors and a gradient direction, and optionally set corner badge text.
- Check the preview at true 1200×630 proportions.
- Press Download PNG and reference the file from your page's og:image meta tag.
Frequently asked questions
Why 1200×630?
It is the size virtually every platform (Facebook, LinkedIn, X, Slack, Discord, iMessage) recommends for large link-preview cards, and the ratio that avoids awkward cropping.
Is the image uploaded anywhere?
No. The card is drawn on an HTML canvas in your browser and exported directly to a PNG download. Nothing leaves your machine.
Can I use custom fonts?
The tool uses your system font stack for reliability. Because rendering is local, installed fonts on your machine will be used automatically.
How do I make the card show up when I share my link?
Host the PNG on your site and add <meta property="og:image" content="https://yoursite/og.png"> to the page's head. Most platforms cache aggressively, so change the file URL after updates.