OG Image Maker
Design and download Open Graph images for social sharing. Choose from 5 templates, customize gradients, fonts, and colors, then export as PNG.
Open Graph (OG) images are the preview thumbnails that appear when you share a link on social media platforms like Twitter/X, Facebook, LinkedIn, Slack, and Discord. A well-designed OG image dramatically increases click-through rates and makes your content look more professional and trustworthy.
This tool lets you design and download OG images entirely in your browser — no account, no server uploads, and no design software required.
How to Use the OG Image Maker
- Choose a template — select from 14 modern visual layouts using the Template dropdown.
- Enter your content — fill in the title, description, and site/brand name.
- Set the canvas size — pick from 7 standard and HiDPI presets, or choose Custom to enter any resolution you need.
- Customize the look — switch between gradient (22 presets + custom colors) or solid background; adjust title color, description color, accent color, font family, and title size.
- Download — click "Download PNG" to save the image at full resolution.
Template Designs
| Template | Best For | Key Visual |
|---|---|---|
| Simple | General pages | Subtle dot-matrix background, pill badge, soft drop shadow |
| Framed | Articles, posts | Frosty inner frame with gentle center glow, wide-spaced brand name |
| Blog | Blog posts | Floating left sidebar, vertically rotated site name, author badge |
| Docs | Documentation | Terminal >_ prefix, monospace labels, technical grid overlay |
| Product | Apps, SaaS | Full-bleed radial blob, 900-weight oversized title |
| Minimal | Clean branding | Brutalist tight-kerned typography, high contrast, no decoration |
| Logo Mark | Brand-focused | App icon–style badge with gloss highlight and drop shadow, centered layout |
| Split | Strong identity | 35/65 split panel with dot pattern and giant watermark letter |
| Dark Glow | Events, launches | Pure black base, Vercel-style radial glow, white-to-gray title gradient |
| Glass Card | Modern UI | Frosted glass card over blurred mesh color blobs |
| Neon | Cyberpunk, gaming | Scan-line dark backdrop, neon glow on text, pink-blue ambient light |
| Editorial | Magazines, essays | Star watermark, thick top rule, large serif-feel title block |
| Spotlight | Launches, showcases | Downward spotlight cone, subtle grain texture, accent dot separator |
| Bauhaus | Creative, agencies | Modernist circles, tilted square, and triangle — strict geometric art |
Canvas Size Presets
| Label | Dimensions | Use Case |
|---|---|---|
| OG 1200×630 | 1200 × 630 px | Universal — works on Facebook, LinkedIn, Discord, Twitter |
| OG 2x 2400×1260 | 2400 × 1260 px | HiDPI / Retina — ultra-crisp on high-density screens |
| Wide 1280×640 | 1280 × 640 px | Twitter/X large summary card |
| Wide 2x 2560×1280 | 2560 × 1280 px | HiDPI / Retina Twitter card |
| 800×418 | 800 × 418 px | Compact 2:1 format |
| Square 1080 | 1080 × 1080 px | Instagram / social square |
| Square 2160 | 2160 × 2160 px | HiDPI social square |
| Custom | User-defined | Any resolution from 100 to 4000 px |
The Custom option reveals two number inputs. Enter the exact pixel dimensions you need — useful for non-standard platform requirements or internal design systems.
Background Options
Gradient mode offers 22 built-in presets spanning dark and light palettes:
Navy, Slate, Charcoal, Ocean, Forest, Violet, Sunset, Fire, Rose, Teal, Midnight, Light, Cyberpunk, Aurora, Peach, Indigo, Crimson, Electric, Noir, Emerald, Warm Dusk, Arctic.
You can also pick any two custom start and end colors and choose from four gradient directions: diagonal, vertical, horizontal, or reverse diagonal.
Solid color mode replaces the gradient with a flat background color of your choice.
Font Selection
Six typefaces are available, all rendering cleanly on canvas:
- Inter / System UI — clean, neutral, high-legibility at any size
- Syne — bold geometric display font, ideal for Product and Logo Mark templates
- DM Mono — monospace, great for developer docs and technical aesthetics
- Georgia — classic serif for editorial or academic content
- Arial — safe, universally legible fallback
- Courier New — retro monospace for creative or code-themed images
SEO Impact of OG Images
Search engines do not directly rank pages for having OG images, but the indirect effects are well documented. Pages with compelling OG images receive more social shares, and higher engagement can indicate content quality. Platforms like Twitter may also surface content with valid Open Graph metadata more prominently in previews.
Add these <meta> tags to your HTML after uploading the exported image:
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the image">FAQ
What is an OG image?
An OG image (Open Graph image) is a preview image defined via the og:image meta tag. When someone shares your URL on social media, messaging apps, or link aggregators, the platform fetches this image to display alongside the link preview.
What size should my OG image be?
1200 × 630 pixels is the safest universal size, while the 2400 × 1260 HiDPI option ensures perfect crispness on high-density mobile screens. The 1.91:1 ratio is accepted by Facebook, LinkedIn, Discord, and Twitter large cards without cropping. The Custom option in this tool lets you target any dimensions if your platform has non-standard requirements.
Why is my OG image not updating after I change it?
Social platforms cache OG images aggressively. Facebook provides the Sharing Debugger tool to force a re-fetch. Twitter/X will refresh automatically after some time, or you can use their Card Validator. Adding a version query string to the image URL (e.g., og-image.png?v=2) forces platforms to treat it as a new resource.
Can I use a custom font not listed in the dropdown?
The tool uses the FontFace API indirectly — only fonts already loaded on the page are reliably available on the canvas. DM Mono and Syne are loaded in the page header and work everywhere. For a proprietary brand font, generate OG images server-side with Puppeteer, Satori, or @vercel/og instead.
Does the downloaded PNG match the preview exactly?
Yes. When you click Download PNG, the tool renders a fresh offscreen canvas at the exact target resolution (e.g., 2400 × 1260 for the HiDPI preset) and exports that — not a screenshot of the preview. The preview is scaled down for display; the download is always full resolution.