Free OG Image Generator
Generate a 1200×630 Open Graph image that works on Twitter/X, LinkedIn, Facebook, and Slack. Upload your logo, choose a background, get a ready-to-deploy PNG and the HTML meta tags.
Generate OG image freeOG image dimensions by platform
1200×630 works across all major platforms. Here are the exact specs.
| Platform | Recommended | Min size |
|---|---|---|
| Twitter / X | 1200×628 | 800×418 |
| 1200×627 | 1200×627 | |
| 1200×630 | 600×315 | |
| Slack | 1200×630 | 500×260 |
| iMessage / iOS | 1200×630 | 300×157 |
The correct OG image meta tags
Snappicon generates this snippet alongside your image — paste it into your HTML <head>.
<!-- Open Graph --> <meta property="og:image" content="https://yourdomain.com/og-image.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:type" content="image/png" /> <!-- Twitter / X Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yourdomain.com/og-image.png" />
Adding OG images in Next.js
Next.js App Router has two ways to add OG images:
File-based (recommended)
Drop opengraph-image.png into your app/ directory. Next.js generates the og:image tag automatically.
app/ opengraph-image.png ← place here page.tsx
Via metadata export
Set the OG image URL in your page's metadata export for more control:
export const metadata = {
openGraph: {
images: ["/og-image.png"],
},
};What Snappicon generates for social sharing
1200×630 PNG
The universal OG image size that works across all platforms.
Custom background color
Set your brand color as the OG image background.
Centered logo
Your logo is centered and scaled to fit within the OG image canvas.
Twitter card support
The generated image works as a Twitter/X summary_large_image card.
HTML meta tags included
Copy-paste og:image and twitter:image tags generated automatically.
Bundled with favicons
Get your OG image alongside favicons and PWA icons in one ZIP.
OG image generator FAQ
What is an Open Graph image?
An Open Graph image (OG image) is the preview image that appears when you share a URL on social media. Twitter, LinkedIn, Facebook, Slack, and iMessage all read the og:image meta tag to display a rich link preview.
What size should an OG image be?
1200×630px is the universal recommended size for Open Graph images. It displays correctly on Twitter/X, LinkedIn, Facebook, Slack, and iMessage. Minimum size for most platforms is around 600×315px.
What is the correct OG image meta tag?
Add these to your HTML <head>: <meta property="og:image" content="https://yourdomain.com/og-image.png" /> and <meta name="twitter:card" content="summary_large_image" /> plus <meta name="twitter:image" content="..." />.
How do I add an OG image in Next.js?
Place opengraph-image.png in your app/ directory — Next.js generates the og:image meta tag automatically. Or set it in your metadata export: openGraph: { images: ["/og-image.png"] }.
What format should an OG image be?
PNG or JPEG. PNG is recommended for images with logos or text since it's lossless. Keep the file size under 8MB — most platforms have this limit. Snappicon generates an optimized PNG.
Related tools & guides
Generate your OG image now — free
Upload your logo and get a 1200×630 social sharing image with the HTML meta tags. No account needed.
Generate OG image free