OGOG Image Generator
Template
Content
Style
Logo / Icon
1200 × 630 px · PNG · Twitter, Facebook, LinkedIn, Slack
Preview (scaled)
Standard OG image size · 1.91:1 ratio · Recommended: < 8 MB

Related Tools

See all ->
Aspect Ratio CalculatorWidth · Height · Social Media SizesMeta Tag GeneratorSEO · OG · Twitter · JSON-LDFavicon GeneratorAll sizes + ICO + WebManifestColor Palette GeneratorHarmony-based palettesGradient GeneratorCSS gradient builderColor Contrast CheckerWCAG AA & AAA complianceFont Pairing ToolGoogle Font combinationsImage CompressorCompress PNG · JPEG · WebP

OG Image Generator — Free Open Graph Preview Card Builder for Social Media

Updated May 14, 2026
Share & Support

What's included

Features

5 templates — Clean (light + accent bar), Dark (dark bg + left accent), Gradient (two-color bg + centered text), Bold (oversized title + accent shapes), Split (colored left panel + content right)
1200×630 px output — the universally accepted OG image standard for Twitter, Facebook, LinkedIn, Slack, WhatsApp, and iMessage link previews
Custom title, description, and site name with automatic text wrapping on the canvas at any content length
Color pickers with hex input for background, accent, and text colors — all with instant live preview on the canvas
Gradient template — two color pickers for gradient start and end; rendered as a diagonal linear gradient across the full canvas
Four font families — sans-serif (Inter/Arial), serif (Georgia), monospace (Courier New), and Impact for display-heavy layouts
Logo / icon upload — accepts any image format; drawn in the appropriate position for the selected template
Download as PNG — full 1200×630 resolution, no watermark, no account, unlimited downloads
Copy image to clipboard — uses the Clipboard API for direct paste into design tools, Slack, or email
100% browser-based — uses HTML Canvas API; no images or content sent to any server; works offline once loaded

About this tool

OG Image Generator — Free, Create 1200×630 Open Graph Preview Cards for Twitter, Facebook & LinkedIn

Every link you share on social media shows a preview card — a title, description, and image. That image is your Open Graph (OG) image. When it's missing or generic, click-through rates drop. When it's branded and relevant, shares convert. This generator lets you build a polished 1200×630 OG image in under a minute, with no design software and no account.

Choose from five templates built for different use cases. Clean gives you a professional light-background layout with an accent color bar — the safest choice for any website. Dark uses a dark background with a colored left accent bar — popular for developer tools, SaaS dashboards, and tech products. Gradient creates a two-color diagonal gradient background with centered text — bold and attention-grabbing for product launches, events, and marketing pages. Bold uses oversized 900-weight typography with subtle background shapes — great for minimal one-message announcements. Split divides the card into a colored left panel (your brand/logo) and a content right panel — structured and instantly branded.

Customize everything: title (the main headline), description (the supporting text), site name or URL, background color, accent color, text color, and font family (sans-serif, serif, monospace, or impact). The gradient template adds a second color for the gradient end. Upload your logo or icon and it appears in the corner or panel depending on the template.

The live preview scales the full 1200×630 canvas to fit your screen — what you see is exactly what you get. Click Download PNG for a full-resolution file ready to upload to your server or CDN. Click Copy Image to copy directly to your clipboard using the Clipboard API's ClipboardItem, with an automatic fallback to a regular download if the browser or a non-HTTPS context blocks clipboard image writes.

Each template is its own canvas-drawing routine rather than one shared layout with color swaps — Split, for instance, fills two rectangles for the left and right panels and centers the site name and logo within the left panel's own coordinate space, while Gradient centers all text with ctx.textAlign = 'center' and builds the background from createLinearGradient across the full diagonal. Long titles and descriptions never overflow or get clipped: a word-wrapping routine measures each candidate line with ctx.measureText against the template's available content width and only breaks to a new line once the next word would exceed it, and a separate line-counting pass runs first so the block of text can be vertically centered as a whole before a single pixel is drawn — this is why a two-word title and a four-line title both end up centered in the same card rather than one sitting oddly high or low.

Everything renders in your browser using the HTML Canvas API. No images are sent to any server.

Step by step

How to Use

  1. 1
    Select a templateChoose one of the five templates from the selector at the top: Clean — light background with a horizontal accent bar, title left-aligned, best for blogs and documentation sites. Dark — dark background with a vertical left accent bar, popular for developer tools and SaaS products. Gradient — two-color diagonal gradient filling the canvas with centered text, best for product launches and marketing pages. Bold — solid background with large 900-weight title text and subtle circular accent shapes, good for single-message announcements. Split — a colored left panel holding your brand name and logo, and a white/light right panel with the title and description, great for branded content.
  2. 2
    Fill in your contentType your page title in the Title field — this becomes the main headline. Keep it under 60 characters for best display on Twitter and LinkedIn cards. Add a Description (the supporting one-liner under the title) — 100–150 characters work best. Fill in your Site Name or URL in the site name field — this typically appears in smaller text at the bottom or side of the card. These three fields are the minimum needed to generate a useful preview card.
  3. 3
    Set your colors and fontClick the Background Color picker to set the card background — or for the Gradient template, set both gradient Start and End colors. Click the Accent Color picker to set the color used for bars, borders, and decorative shapes. Click the Text Color picker to control the headline and body text color. Choose a Font Family from the dropdown: sans-serif (clean/modern), serif (editorial/traditional), monospace (code/technical), or Impact (bold/display). All changes update the live preview instantly — no click required.
  4. 4
    Upload a logo or iconClick Upload image to add your logo or icon to the card. The logo is placed in the appropriate position for the selected template — bottom-left corner for Clean, in the left panel for Split, centered for other templates. Any image format (PNG, JPEG, WebP, SVG rendered as raster) is accepted. Use a square logo or icon for best results. The logo dimensions adapt to the template layout automatically.
  5. 5
    Download the PNG and deploy itWhen the live preview looks right, click Download PNG to save the 1200×630 image to your computer. Click Copy Image to copy the rendered canvas directly to your clipboard — paste it into Figma, Notion, Google Slides, or a chat thread. Upload the downloaded PNG to your web server or CDN (Cloudflare, AWS S3, Cloudinary), then add the og:image meta tag to your page's HTML <head> pointing to the hosted URL: <meta property="og:image" content="https://yoursite.com/og.png" />. Use the Meta Tag Generator to generate the complete set of og: and twitter: tags at the same time.

Real-world uses

Common Use Cases

◑
Create OG preview images for blog posts and articles
Generate a unique OG image for each blog post using the Clean or Bold template. Use the post title as the card title and a one-line summary as the description. Set your brand colors and add your logo. Posts with custom OG images consistently outperform those with generic site-wide images in social feed click-through rates. Use the Meta Tag Generator to write the full set of meta tags at the same time.
⚡
Generate product launch and landing page preview cards
For a product launch, the OG image is the first thing people see when the announcement is shared. Use the Gradient or Bold template with strong brand colors and a compelling short title. The Split template works well for established brands — left panel shows the logo prominently, right panel shows the product name and tagline. Test with the Twitter Card Validator before launch.
▦
Create OG images for developer tools and documentation
Developer-facing tools and documentation benefit from the Dark template — it signals a technical product and stands out in feeds dominated by light cards. Use a monospace font for code-adjacent products. Documentation pages rarely get unique OG images — generating one per major section significantly improves clicks from Stack Overflow answers and GitHub READMEs.
△
Build social share images for marketing campaigns
Campaign landing pages, event registrations, and webinar signup pages need OG images that communicate urgency and value. The Gradient template with vibrant colors creates visual impact in a feed. Generate a set of variations by changing the gradient colors and compare — the preview updates instantly. Combine with the Meta Tag Generator to set og:title, og:description, and og:image together.
◉
Create branded OG images for company pages and portfolios
Use the Split template for company or personal portfolio sites — the left panel carries your logo and brand color, the right panel shows the page title and description. This creates a consistent branded look across all shared pages. For portfolios, the Bold template with a dark background and your name as the title makes a strong impression in social feeds.
≡
Generate OG images for newsletters and Substack posts
Newsletter issues shared on social media benefit from consistent OG branding. Use the Clean or Dark template with your newsletter's colors and issue title. For Substack, generate the image and upload it as the post's cover image — Substack uses it as the og:image. For email newsletter archives on a custom domain, add the og:image meta tag to ensure proper previews when issues are shared.

Got questions?

Frequently Asked Questions

An Open Graph (OG) image is the preview image that appears when a URL is shared on social media platforms like Twitter/X, Facebook, LinkedIn, Slack, and WhatsApp. It is specified in the page's HTML using the meta tag <meta property="og:image" content="https://example.com/og.png" />. The recommended size is 1200×630 pixels with a 1.91:1 aspect ratio. Twitter recommends a minimum of 600×314px for a "summary_large_image" card, but 1200×630 is the universally accepted standard. The file should be under 8MB for Twitter and under 5MB for Facebook. PNG and JPEG are both supported — PNG is preferred for text-heavy images because it preserves sharp edges better than JPEG compression.

Use this OG image generator: select a template (Clean, Dark, Gradient, Bold, or Split), then fill in your title, description, and site name. Choose your background color, accent color, and text color using the color pickers. Optionally upload your logo or icon. The live preview updates instantly on the right. When satisfied, click "Download PNG" to save the 1200×630 image to your computer. Upload it to your server or CDN, then add the og:image meta tag to your page's HTML head pointing to the uploaded URL. Repeat the process for each page that needs a unique preview image.

After generating and downloading your OG image, upload it to your web server or a CDN (Cloudflare, AWS S3, Cloudinary). Then add these meta tags to the <head> section of your HTML: <meta property="og:image" content="https://yoursite.com/og-image.png" /> and <meta property="og:image:width" content="1200" /> and <meta property="og:image:height" content="630" />. For Twitter specifically, also add <meta name="twitter:card" content="summary_large_image" /> and <meta name="twitter:image" content="https://yoursite.com/og-image.png" />. In Next.js, use the metadata.openGraph.images array. In WordPress, plugins like Yoast SEO or RankMath handle the og:image tag automatically.

Clean: Light/custom background with a colored accent bar across the top, title left-aligned, description below, site name bottom-left. Professional and versatile — works for blogs, SaaS products, and documentation. Dark: Dark background with a colored left accent bar. High contrast, modern — popular for developer tools and tech products. Gradient: Two-color diagonal gradient background with centered text. Eye-catching and bold — works well for marketing pages, product launches, and events. Bold: Solid background with subtle circular accent shapes, oversized 900-weight title. Punchy and minimal — great for landing pages and single-message announcements. Split: Accent-colored left panel (site name + logo) and content right panel (title + description). Structured two-column layout — good for branded content with a recognizable icon.

Social platforms cache OG images aggressively. If you updated an image but the old one still appears: for Twitter/X, use the Twitter Card Validator (cards-dev.twitter.com/validator) to force a cache refresh. For Facebook, use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and click "Scrape Again". For LinkedIn, use the Post Inspector (linkedin.com/post-inspector). If the image never appeared, check that the og:image URL is publicly accessible (not behind authentication or localhost), the URL returns a 200 status, and the image is under the size limit. Also verify the meta tag is in the <head> and is not added after JavaScript hydration.

Yes — the 1200×630 size generated by this tool is the recommended size for Twitter's "summary_large_image" card type, which displays a large preview image above the tweet. Twitter also accepts the standard og:image tag and will use it for its card if no twitter:image tag is present. For a Twitter summary card (small square thumbnail), a 1:1 image is recommended instead — the 1200×630 image will be cropped. Use the "summary_large_image" card type in your meta tags for the best result with the images generated here.

Ideally yes, but a tiered approach is practical. High-priority pages (homepage, blog posts, product pages, landing pages) benefit most from unique OG images because they are likely to be shared. These pages get the highest return from a distinctive image that shows the page title and context. Supporting pages (about, contact, terms) can share a single branded OG image. For blogs with many posts, generate one image per post using this tool — blog posts are the most frequently shared content type and a compelling preview significantly improves click-through rate from social feeds. Increase engagement by 2–5× by using custom images over the default site-wide fallback.

Yes — completely free, no account required, no watermark, no usage limits. Generate as many OG images as you need, download them as full 1200×630 PNG files, and use them on any website. All generation runs in your browser using the HTML Canvas API — no images are sent to any server, so your content is private. The tool works offline once the page has loaded.