Design shareable social preview images in your browser — title, colors, logo, one-click PNG
Click to upload a logo
PNG, JPG or WebP
An Open Graph image is the picture that appears when you share a URL on Facebook, LinkedIn, Twitter, WhatsApp, Discord, Slack, iMessage or any other platform that reads Open Graph metadata. When someone pastes your link, the platform crawls the page, finds the og:image meta tag, and shows that image next to your title and description.
A well-designed OG image transforms a plain blue link into a visually compelling card. Studies on social sharing consistently show that posts with custom preview images earn significantly higher click-through rates than bare links. If you write blog posts, launch products, publish newsletters, or run a business site, your OG image is the first thing most people will see — often before they ever visit your site.
The Open Graph specification does not mandate a fixed size, but in practice, every major platform converged on 1200×630 pixels (a 1.91:1 aspect ratio) as the recommended format. Here's why:
Smaller images get scaled up and look blurry. Larger images get compressed and lose detail. 1200×630 is the sweet spot: sharp on Retina displays, efficient to load, and universally accepted.
Tip: Keep critical text at least 60 pixels away from every edge. Facebook crops the edges slightly on some layouts, and safe margins guarantee nothing important is cut off.
Not every 1200×630 image works well as a social preview. The best OG images share a few traits:
Your OG image appears as a thumbnail in the feed. If the text is under ~48 pixels on the 1200-wide canvas, it will be unreadable on mobile. Aim for a title size between 64 and 90 pixels. This generator scales the title automatically when it overflows, but starting with a short, punchy headline produces the best results.
Dark text on a light background or white text on a saturated gradient both work. What fails is low-contrast combinations like light gray text on a pastel background — those become invisible at feed scale. This tool includes preset gradients specifically chosen for readability.
Consistent colors and a visible logo make your cards instantly recognizable as yours in a crowded feed. Users learn to associate a specific gradient or accent color with your brand, which is why the presets here focus on cohesive, repeatable palettes.
The single biggest mistake is cramming too much into an OG image. A headline, a short subtitle, and a brand name are all you need. Leave the details for the actual page.
The Open Graph protocol was introduced by Facebook in 2010 and has since become the de facto standard for social metadata across the web. It uses simple meta tags in the
of an HTML document:When a platform crawls your URL, it reads these tags and builds the preview. If you skip og:image, the platform falls back to the first large image it finds on the page — which is often a hero banner with bad cropping, or a logo that looks awkward at wide ratios. Providing a hand-designed OG image guarantees the result.
Twitter (now X) uses its own set of tags — twitter:card, twitter:title, twitter:image — but in practice most sites set both Open Graph and Twitter Card tags with the same content. The image you generate here works for both: 1200×630 is compatible with the summary_large_image card type and with the standard Open Graph image tag at the same time.
This tool renders your OG image entirely in the browser using the HTML5 Canvas API. That has three important consequences:
Nothing you type, upload, or drag into this tool ever leaves your device. There is no server rendering, no upload step, and no temporary storage. You can even open the page, disconnect from the internet, and still generate images.
Canvas rendering is instant. Every keystroke in the title field, every color change, every preset click triggers a re-render in under 16 milliseconds — fast enough to feel live.
The output is a true 1200×630 PNG, not a scaled screenshot. Text is rendered at full resolution using anti-aliasing, gradients are smooth at every zoom level, and uploaded logos appear at their original pixel quality. The downloaded file is byte-for-byte what you see in the preview.
Creating an OG image is easy; creating one that actually increases clicks takes some craft. Here is the framework this tool is built around:
The title field is the most important text on the canvas. Make it specific ("Cut Image Size by 80% in 2 Clicks") instead of vague ("Image Compression Tool"). Numbers, questions, and concrete outcomes outperform generic taglines.
The subtitle should add a detail the title didn't say — the audience, the format, the outcome, or a promise. Don't repeat the title in different words.
Blue reads as trustworthy, orange as energetic, green as fresh, dark gradients as premium. Match the palette to the tone of the page you're linking to. This generator's presets cover the most common tones used by SaaS, editorial, portfolio, and e-commerce sites.
Pick one gradient and stick with it across your site. After five or six shares, readers will spot your cards instantly in a feed, which is worth more than any individual design tweak.
People use this generator for a wide range of projects. The most common cases:
When you change any control, this generator clears a 1200×630 canvas, draws the background (solid, linear gradient, radial glow, or blurred mesh blobs depending on the style you chose), renders the logo, and then draws the title, subtitle, and brand name with automatic font-size scaling if the text overflows the available width.
Uploaded logos are drawn as-is at a maximum of 240×80 pixels, preserving aspect ratio. Transparent PNGs are recommended — they blend smoothly with any gradient. Very dark or very light logos may need a small backing plate; add one by choosing the "solid" background style if needed.
The "Download PNG" button calls canvas.toBlob("image/png") and triggers a file download. PNG is used instead of JPG because it produces sharper text edges at the same file size for this kind of mostly-flat graphic. The copy-to-clipboard button uses the Clipboard API where available and falls back gracefully if the browser blocks it.
Once you download the PNG, upload it to your server and reference it in the
of the page you want to share:<meta property="og:image" content="https://yourdomain.com/og/my-post.png">
Also add og:title, og:description and og:url, and mirror them with twitter:title, twitter:description and twitter:image. Then run the URL through the Facebook Sharing Debugger or LinkedIn Post Inspector once to force a re-scrape if you're replacing an existing image.
Not strictly, but it is the widely accepted standard that gives the best results across Facebook, LinkedIn, Twitter, WhatsApp, Discord and Slack. Facebook's debugger explicitly recommends 1200×630, and other platforms scale it cleanly.
Yes, but PNG is sharper for text-heavy designs and produces cleaner edges on gradients. JPG is better for photographic OG images. This tool exports PNG because it works better for the default text-and-gradient layout.
Some platforms crop or zoom the OG image slightly. Keep important text within the safe area, which this tool enforces through its padding setting. Use at least 60 pixels of padding on all sides.
No. The brand name text field alone is enough. A logo helps with recognition but is optional.
This interface generates one image at a time. For large sites, developers often script the same approach using a headless renderer or generate images server-side with a template. For a handful of pages, this tool is faster than any script.
Platforms choose the preview card type based on the meta tags you provide. To force the wide 1.91:1 card, set twitter:card to summary_large_image and ensure your og:image dimensions match the recommended 1200×630.