OG Image Generator
Type a title and subtitle, choose a solid or gradient background and an optional logo URL, preview the 1200x630 social card live, and download it as a PNG.
OG Image Generator — Create the 1200x630 Open Graph image that shows up when your page is shared on Facebook, X/Twitter, LinkedIn, or Slack. Enter a title and subtitle, pick a solid or two-color gradient background, set the text color and alignment, and optionally point to a logo URL. A live preview redraws as you type and you can download the finished card as a PNG. The image is drawn entirely on a canvas in your browser, so your text and colors never leave your device.
What is OG Image Generator?
The OG Image Generator is a free in-browser tool for creating social share cards (Open Graph / Twitter Card images) at the standard 1200x630 pixel size. Marketers, bloggers, indie developers, and anyone shipping a landing page use it to make a clean preview thumbnail without opening a design app. You type the headline and an optional subheading, choose a solid color or a diagonal gradient, set the text color and left or centered alignment, and paste a logo URL if you want a brand mark in the corner. The canvas redraws live so you can fine-tune wording and colors, then export a PNG ready to reference in your og:image meta tag.
How to use OG Image Generator
- Type your title in the Title field; it is drawn large and bold and wraps onto up to three lines.
- Add an optional subtitle below the title, or leave it empty to show only the headline.
- Open Settings to choose a solid or gradient background, set the background and text colors, and pick left or centered alignment.
- Optionally paste a logo image URL (a CORS-enabled image) to place a logo above the text.
- Watch the 1200x630 preview update live, click it to enlarge, then download the card as a PNG.
Examples
Blog post share card
Type the article headline as the title and the author or site name as the subtitle, pick a gradient that matches your brand, and download a 1200x630 PNG to use as the post's og:image.
Product launch banner
Use a solid brand color, centered alignment, your tagline as the title, and a logo URL in the corner to produce a consistent launch card for every social channel.
Frequently asked questions
- What size is the generated image?
- Always 1200x630 pixels, the standard Open Graph and Twitter summary-large-image aspect ratio (about 1.91:1). That size displays crisply on Facebook, X/Twitter, LinkedIn, Slack, and Discord link previews.
- How do I add my own logo?
- Paste a direct URL to a logo image into the Logo URL field. The image is fetched from that URL and drawn above the text at a fixed height with its aspect ratio preserved. The source must allow cross-origin use (CORS) or the browser will block drawing it onto the canvas.
- Can I control the colors and layout?
- Yes. In Settings you can switch between a solid background and a two-color diagonal gradient, set the background color(s) and the text color, and choose left or centered alignment. The title and subtitle wrap automatically and long text is truncated with an ellipsis.
- Is my text or image uploaded anywhere?
- No. The card is drawn entirely on an HTML canvas in your browser and exported to a PNG locally. Your title, subtitle, and colors are never sent to a server. Only a logo URL you provide is fetched, and that request goes straight from your browser to the host you chose.
Related tools
Code to Image
Turn a code snippet into a polished, syntax-highlighted PNG card in your browser, with a theme, gradient or transparent background, and padding — no upload.
Color Contrast Checker
Check the WCAG contrast ratio between a foreground and background HEX color and see whether it passes AA and AAA for both normal and large text.
Color Mixer
Blend two HEX colors at a chosen ratio in RGB or Lab color space and read the resulting mid color back as a swatch and copyable HEX value.
Color Shades Generator
Turn one base HEX color into a Tailwind-style 50-950 shade scale, mixing toward white and black, each step with a swatch and copyable HEX.