OG Image Generator
Create 1200×630 Open Graph social-share images with title, subtitle, and gradient presets
How to use
- Enter title, subtitle, domain
- Pick a preset or set custom colors
- Download 1200×630 PNG
Use cases
- Blog thumbnails
- Landing page OG
- Marketing campaigns
About the OG Image Generator
Open Graph images are the thumbnails that appear when your link is shared on LinkedIn, Facebook, Slack, or WhatsApp. A bad OG image kills click-through. This generator builds a clean, modern 1200×630 image with title + subtitle + domain label — ready to drop into your page's og:image tag.
Features
- 7 preset canvas sizes: OG 1200×630, Twitter card 1200×675, Instagram 1080×1080, Story 1080×1920, YouTube 1280×720, Twitter header 1500×500, LinkedIn banner 1584×396
- Three background modes: gradient (10 curated presets + custom angle), solid color, or uploaded photo with dark overlay
- Logo upload (PNG / SVG) with 4 corner positions and size slider
- Background photo upload with auto cover-fit + adjustable dark-gradient overlay for text legibility
- Eyebrow pill (NEW / LAUNCH / category) with contrast-aware text color
- Title + subtitle + domain label; left/center/right alignment; serif / sans / mono font choice
- Export as WebP (smallest), JPEG, or PNG (lossless) with quality slider
- Live file-size display + over-limit warnings (5 MB = platform rejection threshold)
- Canvas renders in your browser — images never uploaded to a server
How it works
- Enter title, subtitle, and domain.
- Pick a preset or set custom gradient colors.
- Click 'Download 1200×630 PNG'.
- Reference it as og:image + twitter:image in your page <head>.
Frequently asked questions
What size should OG images be?
+
1200×630 — universal sweet spot. Facebook, LinkedIn, Slack all honor it; Twitter/X crops slightly on summary_large_image. Keep critical text in the center-left for safe cropping.
How do I use the output?
+
Upload the PNG somewhere publicly accessible (Cloudflare R2, S3, your Next.js /public folder). Reference it in your <head>: <meta property="og:image" content="https://yoursite.com/og.png" />.
Why not use a programmatic OG-image API?
+
You should for high-volume sites (Vercel's @vercel/og, Satori, etc.). This tool is for one-offs and when a designer wants a visual editor.
Can I upload a logo?
+
Not in v1 — the design intentionally uses typography + gradient for simplicity. Add logo overlay in Figma / Photoshop if needed.
Does it work for Twitter Cards?
+
Yes — summary_large_image cards crop to 2:1 (1200×600), which 1200×630 covers with minor top/bottom letterbox.