Overview
What this tool does
An Open Graph image is the visual that appears when you share a link on Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, X, or any other modern platform that renders link previews. The right size is 1200x630 pixels (the universal Open Graph + Twitter Card spec). This generator builds one in your browser: pick a layout, set a title and subtitle, apply a color palette (or build your own with the four pickers), and download a PNG ready to paste at /og.png on your site. The canvas is drawn with system fonts so the output is crisp and consistent on any device. Pair this with our Meta Tag Generator to wire up the og:image, og:image:width, and og:image:height tags in your page <head>. 100% client-side, no signup.
How to
Use it in 3 steps
- Edit the title, subtitle, and badge to taste. The preview updates live.
- Pick a layout (left-aligned or centered).
- Pick a background (solid or gradient) and adjust the colors using the four pickers, or click a palette preset to apply all four at once.
- Click 'Download PNG' to save a 1200x630 image. The filename comes from your title.
- Upload the PNG to your site (e.g. /og.png) and reference it in your <head> with the Open Graph + Twitter Card tags from our Meta Tag Generator.
FAQ
Frequently asked questions
▶Why 1200x630 specifically?
It's the size every major platform (Facebook, LinkedIn, Slack, Discord, iMessage, X, WhatsApp, Telegram) crops to when rendering a link preview. Other sizes get rescaled and look fuzzy. 1.91:1 aspect ratio.
▶Will the title scale down if it's too long?
Yes. The generator starts at 92px and steps down to 48px until the title fits in three lines or fewer. Subtitles do not auto-scale; they wrap onto multiple lines if needed.
▶Why does the PNG look slightly different from the preview?
It shouldn't. The preview is the actual canvas at 1200x630, rendered scaled down via CSS. What you see is what you'll download. If the fonts look slightly different across devices, that's because the canvas uses your system's font stack (Inter / Segoe UI / Roboto / SF Pro) and falls back if the first choice isn't installed.
▶Can I add my own logo?
Not yet in this version; the badge text is the closest substitute. A logo-upload field is on the roadmap.
▶Is the image uploaded anywhere?
No. The canvas is drawn in your browser, the PNG is built locally via canvas.toBlob(), and the download happens through a local blob URL. Nothing leaves your device.
▶How do I actually use the PNG once I've downloaded it?
Upload it to your website at a known URL (e.g. https://yoursite.com/og.png). Then add this to your page's <head> (the Meta Tag Generator does this for you): <meta property="og:image" content="https://yoursite.com/og.png"> and the matching width/height tags. Re-share your URL on Facebook's Sharing Debugger to force a refresh.