Pixel-perfect 1200×630 social cards with brand-accurate color, custom typography, and reusable presets. Built for designers who are tired of fixing Canva exports at 2 a.m. before a client launch.
If you ship marketing sites, brand systems, or content for clients, link previews are the most reproduced piece of design in your output. A single landing page can surface its OG card in five different feeds: a Twitter quote, a LinkedIn share, an iMessage thread, a Slack channel, and a Discord embed. Each one re-encodes the image differently. The card you painted in Figma at 100% looks gorgeous; the one your client's CEO sees on her iPhone at 320pt wide does not.
Most generators on the market are built for marketers — drag a template, type a headline, done. That works once. It collapses the moment a designer needs to produce thirty cards across a launch, keep typography on a strict scale, or match a brand color to exactly #0F172A rather than "navy-ish." This generator was written with the opposite priority: total control over every pixel, with sensible defaults that get you to the first export in under a minute.
It runs entirely in the browser. There is no upload, no account, no telemetry. Drop in a font file and it renders locally. Paste a hex code and it stays a hex code — no LCH conversion, no auto-contrast nudge, no opinion about your brand. The output is a clean, unwatermarked PNG you can hand off, version-control, or pipe into a static site build.
You've finished a brand system and now need to ship the marketing site. The site has 12 article templates, 3 product pages, an about page, a careers page, and a "for [vertical]" landing matrix. That's 40+ unique OG images, all needing to share a typographic ratio, a corner radius, and a logo lockup. Define the layout once, then iterate copy and accent color per route. Export the full set as a zipped folder of PNGs.
You're freelancing. The client doesn't have a Figma seat for their content team but still needs to swap headlines on OG images post-launch. Hand them a URL with your template baked in. They edit text in a browser, hit download, drop the PNG into their CMS. No "can you re-export this with the new tagline" Slack message at 11 p.m.
Marketing wants to test three headline framings on the same article. Stamp out three near-identical cards with only the title text changed. Pipe each one into a different campaign and watch click-through. Most template tools force you to duplicate the entire artboard for a one-word edit; this one keeps the layout fixed and treats text as data.
Designer portfolios are judged in part by how every surface — including the link preview — feels. The default site builder OG card is almost always wrong: it crops your hero awkwardly or layers ugly type over a screenshot. Replace it with a card that uses your real type ramp and your real brand color. Drop the PNG into the <meta> tag and you're done.
Many brand engagements bundle a "social pack" deliverable — usually 6–10 pre-rendered images for the client to repost when they share their work. Generate them in a single sitting with consistent typography and color, export at 2× for Retina, and zip. The whole pack takes minutes instead of an afternoon of Figma frame duplication.
These defaults exist because every one of them has, at some point, broken a real launch. 32px subhead text turns into mush on iMessage. A 1.4 MB OG file gets silently dropped by LinkedIn. A 1200×600 image gets center-cropped on Discord. Designing for the spec instead of for "looks fine in Figma" is the difference between a card that earns a click and one that gets scrolled past.
<meta property="og:image"> URL — it must be absolute, served over HTTPS, and ideally cache-immutable (hash-named).If you want a longer read on why these specifics matter, our companion piece on OG vs Twitter Card differences covers the platform-by-platform quirks designers run into most often.
1200×630 (1.91:1) is still the universal baseline. Export at 2× (2400×1260) for sharp type after platform re-encoding.
Both re-encode to WebP and crush thin type and gradients. Keep core type at 64px+, avoid hairlines, and prefer full-coverage backgrounds over translucent overlays.
Yes — paste any Google Fonts URL or upload a local .woff2. Rendering happens in your browser; the file never leaves your machine.
Figma is great for one-off comps. This is built for repeatable output: design once, stamp variants from data, export the full set in a single batch.
Yes. The PNG is unwatermarked and free to use commercially with no attribution required.