OG Image Generator
Make Open Graph and social share images for X, LinkedIn, Slack and Facebook. Pick a template, add your title and logo, preview the share card and download a PNG.
1 · Text
2 · Look
Preview
1200×630How it looks when shared
X
Ship beautiful React interfaces in minutes
acme.com
Slack / Discord
Acme
Ship beautiful React interfaces in minutes
Free and premium components, blocks and pages for design engineers.
3 · Add it to your page
Code
<meta property="og:title" content="Ship beautiful React interfaces in minutes" /> <meta property="og:description" content="Free and premium components, blocks and pages for design engineers." /> <meta property="og:image" content="https://acme.com/og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="Ship beautiful React interfaces in minutes" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://acme.com/og.png" />
About the OG Image Generator
OG Image Generator makes the image that appears when your link is shared: pick a template, write the title, add your logo and background, and preview the card on X, LinkedIn and Slack.
When to use it
Use it for every page you expect people to share, like blog posts, launches, docs and landing pages. A clear share image gets noticeably more clicks than a blank card.
How to use the OG Image Generator
- 1Pick a template: Bold, Minimal or Article.
- 2Write your title, subtitle and the brand, domain or author details.
- 3Choose a size, a background (gradient, solid color or your own photo), an accent color, a title font and your logo.
- 4Check the X, LinkedIn and Slack previews, download a PNG or JPG, and copy the meta tags.
OG Image Generator FAQ
- What size should an Open Graph image be?
- 1200×630 pixels. It works for Facebook, LinkedIn, X, Slack, Discord and iMessage. The tool also makes 1600×900 images for X and 1080×1080 squares.
- Is the OG image generator free?
- Yes, free with no sign-up and no watermark.
- Should I use PNG or JPG?
- PNG keeps text the sharpest. JPG is smaller, which helps with photo backgrounds. The download menu shows the exact file size of each.
- How do I add the image to my website?
- Upload the file to your site, enter its URL in the tool, and copy the generated HTML meta tags or Next.js metadata into your page.
- Are my logo and photo uploaded?
- No. Everything runs in your browser, so your files never leave your device and nothing is stored on a server.
More free tools
All tools →PNG & JPG to WebP
Shrink images to WebP in your browser, nothing uploaded.
Image Compressor & Resizer
Smaller JPG, PNG and WebP, resized for any platform.
Background Remover
Free AI cutouts on your device. No uploads, no limits.
Mockup Generator
Screenshots in browser or phone frames on a gradient.
Code to Image
Beautiful code screenshots with syntax themes.
CSS Gradient Generator
Linear, radial and conic gradients with up to five color stops.