Free OG Image Generator — 1200 × 630 Social Cards in Seconds

What is the OG Image Generator — 1200×630?

The OG Image Generator is a single-purpose canvas designer locked at the Open Graph and Twitter Card recommended 1200 × 630 pixel resolution. Add a title and description, pick a solid colour or gradient background, optionally upload a background photo and brand logo, drop in your accent colour and site name, and export as PNG. The whole pipeline runs in your browser on the HTML5 Canvas API — your text, your logo and your exported card never leave your device.

Key features

• Locked 1200 × 630 px canvas — Open Graph and Twitter Card universal size
• Title with adjustable font size, plus supporting description and site name
• Solid, linear-gradient and radial-gradient background options
• Optional background image with colour overlay for text legibility
• Optional logo upload (top-left positioning) for brand recognition
• Accent colour controls top bar and site name for consistent brand look
• Real-time live preview as you type
• PNG export at exact 1200 × 630 resolution, ready for og:image
• 100% client-side — your card never leaves your browser
• No signup, no watermark, no daily limit, no premium tier

How it works

An HTML5 Canvas is created at exactly 1200 × 630 pixels. Each control re-renders the canvas immediately: the background layer fills first (solid, linear or radial gradient using your two chosen colours), then the optional background photo is drawn at cover-fit with a colour overlay multiplied at your chosen opacity for instant text contrast, then the optional logo is drawn at the top-left at 10% canvas height, then the title is typeset in Space Grotesk Bold with margin-aware word-wrapping, then the description in DM Sans Medium at 42% of title size, and finally the site name is drawn in your accent colour at the bottom-left. A top accent bar runs the full width of the card in your chosen accent colour — a tiny but instantly recognisable brand cue when the same site appears multiple times in a busy feed. When you export, the canvas is rendered at the full 1200 × 630 resolution and serialised to a PNG blob via toBlob(). The blob downloads directly with a timestamped filename so your OG cards stay organised. Everything happens locally — no server upload, no telemetry, no signup.

Why use this tool

Most OG image tools are either bundled inside a paid platform you don't otherwise use, watermark the export, or upload your design and brand assets to a third-party server. PikDraw is none of those: the canvas is locked at exactly the Open Graph spec, every feature is free, every export is unwatermarked, and your card never leaves your browser. The whole tool exists to remove every friction between you and the per-page OG image your site is currently missing.

Common use cases

• Per-article OG images for blogs, documentation sites and content marketing pages
• Landing-page link previews for product launches, course drops and event announcements
• Per-page OG cards for e-commerce product pages
• Documentation site OG cards announcing major release notes
• Personal-portfolio OG images for case studies and project write-ups
• Podcast episode link previews where each episode title becomes a card
• Newsletter share-card design — same template across every issue
• Open-source project README header images for GitHub and npm listings

How to use this tool

1. Start at 1200 × 630 — Open Graph (og:image) and Twitter (twitter:image) cards render at 1200 × 630 across Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, X, Threads and every modern link-preview surface. PikDraw locks the canvas at exactly that size so your card looks identical wherever it's shared.
2. Write a sharp title — Aim for one line — at most two — under 70 characters. The title is the only piece of text most people read before deciding to click. Make it concrete, specific, and benefit-driven. Type into the Title field and watch the canvas re-render in real time.
3. Add a description — One supporting sentence under 120 characters. Pair the description with the title to make a complete promise. If your title is the hook, the description is the proof.
4. Pick a background — Choose a solid colour for editorial calm, a linear gradient for energy, or a radial gradient for focus. Add an optional background photo with the colour overlay to keep your text readable on top.
5. Add brand cues — Drop your logo into the top-left for instant brand recognition. Add your site name in the bottom-left so the card stays attributable even when re-shared without context. Tune the accent colour to match your brand palette.
6. Export and ship — Download as PNG (the modern default — perfectly crisp text, lossless gradients). Upload it to your CMS and reference it in your <meta property="og:image" content="…"> and <meta name="twitter:image" content="…"> tags.

Who should use this

Content marketers shipping per-article OG cards, product teams launching new pages with branded link previews, indie hackers shipping side projects who don't want to open Figma just to make one image, documentation maintainers building polished release-note cards, podcast hosts building per-episode share images, and brand teams maintaining link-preview consistency across hundreds of pages.

How to get started

Type your title (under 70 characters), add a one-line description, pick a brand background colour or gradient, optionally upload your logo, hit Download PNG, and reference the file in your og:image and twitter:image meta tags. The first export takes around two seconds.

Best practices

• Keep titles under 70 characters and descriptions under 120 — Facebook and LinkedIn truncate beyond
• Aim for contrast ratio above 4.5:1 between text and background after the colour overlay
• Use the same accent colour across every OG image on your site for a recognisable brand look
• Prefer PNG export — text edges survive platform recompression better than JPG
• Always reference og:image with an absolute https URL, never a relative path
• Use Facebook's Sharing Debugger and LinkedIn's Post Inspector to flush old caches when you update an image

Pro tips

• Stay under 70 characters for the title and 120 for the description — Facebook truncates beyond that on mobile.
• Aim for a contrast ratio above 4.5:1 between text and background — every link-preview surface compresses your image once more after upload.
• Use the same accent colour across all your OG images for a recognisable brand look in busy feed environments.
• PNG export is preferred — every social platform re-encodes, but PNG preserves more detail through that compression.
• Build one template, swap title + description for every article — consistency outperforms novelty on link previews.

Expert insights

Limitations to be aware of

• Single text block (title + description + site name) — no multi-paragraph layouts
• Logo placement fixed to top-left — for fully custom layouts use the Photo Editor
• Single accent colour drives both the top bar and site name — pick a colour that works for both
• No automated per-post generation — for templated bulk OG images, pair with your own build script

Frequently asked questions

What is the correct OG image size?

1200 × 630 pixels — the size Facebook, LinkedIn, X, Slack, Discord, WhatsApp and iMessage all render link previews at in 2026. PikDraw locks the canvas at exactly that resolution so every export matches the spec.

Does the same image work for Twitter / X cards?

Yes — Twitter's summary_large_image card uses 1200 × 630 (technically 2:1, but 1.91:1 is the universally rendered ratio). The same exported PNG works as both og:image and twitter:image without modification.

PNG or JPG for OG images?

PNG is the modern default. Text edges stay crisp through the inevitable platform re-compression, gradients stay banding-free, and the file size delta versus JPG is small once gzip transit compression kicks in. Use JPG only when your design is purely photographic and file size matters.

How do I reference the exported image in my site?

Upload the PNG to your CMS or static-hosting bucket and add three meta tags inside your <head>: <meta property="og:image" content="https://yourdomain.com/og.png" />, <meta name="twitter:image" content="https://yourdomain.com/og.png" />, and <meta name="twitter:card" content="summary_large_image" />. The first two point at your file; the third tells Twitter to render the large card variant.

Does PikDraw upload my OG image anywhere?

No. The whole generator runs in your browser using the HTML5 Canvas API. The text you type, the photo or logo you upload, and the exported PNG never leave your device. There's no server round-trip, no telemetry, no signup, no watermark and no daily limit.

Why is the image not showing up in Facebook / LinkedIn previews?

Three common causes: (1) the og:image meta tag is missing or points to a relative URL — always use an absolute https URL; (2) the image is over Facebook's 8 MB or LinkedIn's 5 MB limit — PikDraw exports stay well under both; (3) the platform has cached an old preview — use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a re-fetch.

Can I generate different OG images for every blog post?

Yes — build one template, then swap the title and description for each article and re-export. The fastest workflow is to keep a brand-coloured template open, paste the article title, change the description, and download. Each export takes about two seconds.

What fonts does the OG Image Generator use?

Space Grotesk for the title (modern, geometric, holds up beautifully at large display sizes) and DM Sans for the description and site name. Both pair well with most brand systems and render consistently across the major link-preview surfaces.