OG Image Generator
Design a 1200×630 social preview card, no design tool needed.
A free online OG image generator — set a title and subtitle, pick a background, add your logo, and export a ready-to-use og:image. No signup, everything runs in your browser.
What is an OG image?
An OG image (Open Graph image) is the preview picture that shows up when a link to your page is shared on Facebook, LinkedIn, Slack, iMessage, or X/Twitter — set via the og:image meta tag. Without one, most platforms either show nothing or fall back to a random image from the page, which looks unpolished. A dedicated OG image with your title and branding makes shared links noticeably more clickable.
Why 1200×630?
1200×630 (a 1.91:1 aspect ratio) is the size Facebook and most other platforms recommend and expect — images significantly smaller get upscaled and look blurry, and a different aspect ratio gets cropped unpredictably by each platform's preview renderer. Sticking to the standard size is the safest choice across every platform that reads Open Graph tags.
Adding it to your page
After downloading the image, upload it somewhere publicly accessible (your site's assets folder, a CDN) and reference the full URL in your page's <head>:
<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 name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og-image.png" />Design tips
Keep the title short — long headlines still wrap automatically, but a concise one reads better at the small size link previews render at on mobile. Left-aligned text with a logo in the corner reads as more "branded"; centered text works well for a punchier, quote-style card. High-contrast text against the background matters most since preview thumbnails are often shown quite small.
Frequently asked questions
What size should an OG image be?
1200×630 pixels (a 1.91:1 ratio) is the standard size recommended by Facebook, LinkedIn, and other platforms that render Open Graph link previews — this tool always exports at exactly that size.
How do I use the generated image on my site?
Download the PNG, upload it to your site or CDN, and reference its URL in your page's <meta property="og:image" content="..."> tag (and og:image:width / og:image:height set to 1200 and 630). Add a matching <meta name="twitter:image"> tag for Twitter/X cards.
Why does long text wrap onto multiple lines?
The title and subtitle wrap automatically at word boundaries to fit the canvas width, keeping the text readable instead of running off the edge or shrinking to an illegible size.
Is my content uploaded anywhere?
No. The image is rendered locally in your browser using a canvas — nothing is sent to a server, including any logo you upload.
Related tools: Favicon Generator · Mesh Gradient Generator · CSS Gradient Generator
