OG image generator — free 1200×630 social cards
Generate an Open Graph image for any page: type a title, pick a theme, download a 1200×630 PNG. Runs entirely in your browser — no account, no upload, no watermark.
Free · no sign-up · runs in your browser
Drawn as large as fits in three lines. Long titles shrink before they are cut.
Your domain or brand, drawn small above the title.
Optional PNG or SVG. Read in this page, never uploaded.
Preview
The card is drawn in this page and saved straight from the canvas. Nothing is uploaded — check your network tab.
Meta tags
<meta property="og:title" content="How we cut our build time in half" />
<meta property="og:description" content="A short, honest summary of the page — the line that decides whether the card earns a click." />
<meta property="og:image" content="https://example.com/how-we-cut-our-build-time-in-half.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/how-we-cut-our-build-time-in-half.png" />Paste into <head> once the image is hosted, with the absolute URL.
An Open Graph image is the picture people see before they see your page — in a Slack thread, a LinkedIn post, an X reply. This generator draws one on a canvas in this tab: type the title and description, choose a size and a theme, drop in a logo if you have one, and download the PNG. Nothing is uploaded, there is no sign-up, and the file has no watermark. The title shrinks to fit before it is ever cut, so a long headline stays whole and readable rather than running off the edge.
How it works
- 01Type the title. It is drawn as large as it can be while still fitting in three lines — long titles get smaller rather than getting chopped, and you are told if one had to be cut.
- 02Add a description if the card needs a second line of context. Two lines is the practical limit before the type gets too small to read at feed size.
- 03Put your domain or brand name in the site field. It renders as a small eyebrow above the title, which is what makes a card look like it belongs to a site rather than to a template.
- 04Pick a size. 1200×630 is the default and covers Open Graph and X's summary_large_image at once; the square is for feeds that crop a wide card badly.
- 05Pick a theme, or drop in a PNG or SVG logo — it is drawn at the top left, beside the site name.
- 06Download the PNG and reference it from your page's og:image and twitter:image tags. The meta tag block on this page is ready to paste once you have hosted the file.
Use cases
- Giving a blog post a share card without opening a design tool or waiting on a designer.
- Making a consistent set of cards for a docs site — same theme and site name, one title per page.
- Replacing the grey placeholder a framework generates by default, which is the single cheapest improvement to how a link looks when shared.
- Mocking up how a headline will actually look in a Slack unfurl before committing to the wording.
- Producing cards for a client's site without uploading their unreleased copy to a third-party service.
- Checking that a long title still reads at feed size, where the card is often shown at a third of its real width.
Frequently asked questions
What size should an OG image be?
1200×630 pixels. That is the aspect ratio Facebook, LinkedIn, Slack and Discord crop to, and it also satisfies X's summary_large_image card, so a single file covers every major consumer. Going larger than 1200×630 gains nothing — it is downscaled on arrival — and going smaller risks the platform refusing to show a large card at all. X requires at least 300×157 and under 5MB; a PNG at this size is typically well under 100KB.
Is anything uploaded to a server?
No. The card is drawn on an HTML canvas in this tab and saved straight from it, and a logo you add is read with the browser's own file API. There is no request to any server, including ours — you can confirm it by opening your browser's network tab while you use the tool, or by disconnecting from the network after the page has loaded. That is also why there is no account and no rate limit.
Why does my title get smaller instead of being cut off?
Because the words are what earn the click. The generator tries the largest font size first and steps down until the title fits in three lines; only when the smallest size still overflows does it cut the tail and add an ellipsis, and it tells you when that happened. Most generators do the opposite and silently clip, which is how cards end up shipping half a sentence.
Can I use my own font or brand colours?
The card is drawn with the system UI font stack, which renders consistently without waiting on a webfont, and the four themes are fixed, contrast-checked pairs. If you need an exact brand font or colour, the honest answer is that a generated PNG is the wrong tool — build the card as HTML and screenshot it, or use a render-on-request service. This tool is for getting a good card in fifteen seconds, not a pixel-exact one.
Do I still need meta tags after downloading the image?
Yes. The PNG does nothing until a page points at it. Host the file somewhere public and add og:image and twitter:image pointing at its absolute URL — a relative path will not work, because the crawler fetching it has no page context. Add og:image:width and og:image:height too; they let a consumer reserve the right space before the image has loaded. The block on this page has all of it filled in.
Why is my new card not showing when I share the link?
Almost always caching. Every platform caches the first card it saw for a URL, often for days. Facebook's Sharing Debugger and LinkedIn's Post Inspector both have a re-scrape button; X refreshes on its own schedule and cannot be forced. If a platform is showing nothing at all rather than a stale card, check that the image URL is absolute, publicly reachable without a login, and served with an image content type.
Related resources
Related reading
- Frontend5 Frontend Tools Worth Bookmarking in 2026A short, opinionated list of the frontend tools and references we reach for every week — frameworks, styling, components, and icons.
More tools
Tailwind CSS color palette generator
Open →Turn one hex code into a full Tailwind color scale — 11 OKLCH-tuned shades from 50 to 950, with contrast ratios, ready to paste into Tailwind v4's @theme block or a v3 config. Free, no sign-up, runs in your browser.
CSS clamp() calculator for fluid typography
Open →Generate a responsive CSS clamp() font size from a minimum and maximum size and the viewport range they should grow across — with the slope and intercept shown, a live preview, and the rendered size at every common screen width. Free, no sign-up.
SVG to JSX converter for React components
Open →Paste an SVG and get a React component back — attributes camelCased, class turned into className, style strings converted to objects, xmlns removed, with optional currentColor, a size prop and TypeScript output. Runs entirely in your browser; nothing is uploaded.
Meta tag generator with Google SERP preview
Open →Fill in a title, description, canonical and Open Graph image and get the complete <head> snippet — with a live Google result preview that measures your title and description in pixels, not characters, so you can see exactly where they will be cut.
Favicon generator — .ico, PNG set and manifest
Open →Turn a PNG or SVG, or just a couple of letters, into the full favicon set: 16, 32, 48, 180, 192 and 512 PNGs, a real multi-size favicon.ico, a web app manifest and the <head> tags. Everything runs in your browser — nothing is uploaded.
JSON-LD schema generator and validator
Open →Build valid JSON-LD structured data for Article, FAQPage, Product, Organization and BreadcrumbList from a form, or paste existing markup to have it pretty-printed and checked for the mistakes that stop a rich result appearing. Free, runs in your browser.
robots.txt generator with validation
Open →Build a robots.txt from user-agent groups, allow and disallow rules, crawl-delay and sitemap URLs — with presets for allowing everything, blocking AI crawlers, or locking down a staging site, and warnings for the mistakes that quietly block your whole site.
UTM link builder and campaign URL generator
Open →Build correctly encoded UTM tracking links from a URL and your source, medium and campaign — with the existing query string and fragment preserved, values properly percent-encoded, and warnings for the capitalisation and spacing that split one campaign across several rows in an analytics report.
Colour contrast checker with WCAG suggestions
Open →Check any two colours against WCAG 2 — normal text, large text and UI components — see the ratio and live samples, and get the nearest passing colour when a pair fails, adjusted in OKLCH so the hue stays yours. Free, runs in your browser.
Image converter — WebP, AVIF, JPEG and PNG
Open →Convert and resize images to WebP, AVIF, JPEG or PNG at the quality you choose, see exactly how many bytes each one saved, and download them one at a time or as a zip. Everything happens in your browser — no image is uploaded.
JSON formatter and validator — free, in your browser
Open →Format, minify and validate JSON in your browser. Broken documents get the exact line and column of the error. Nothing is uploaded, and there is no size limit but your machine.
JSON to TypeScript — generate interfaces from a payload
Open →Paste a JSON payload and get TypeScript interfaces: merged array shapes, optional properties, and real unions instead of any. Runs in your browser — nothing is uploaded.