How to Make an OG Image (1200x630) from Your Logo

You paste a link into Slack and the preview shows a blurry, off-center logo cropped to a square. Or worse, a generic globe icon. The image that should have been there is the OG image, and missing it is one of the fastest ways to make a launch announcement look unfinished.

What an OG image actually is

OG stands for Open Graph, a metadata protocol Facebook introduced in 2010 that the rest of the web adopted. When you paste a URL into a chat app or social platform, the receiver scrapes the page, looks for an <meta property="og:image"> tag in the head, and shows whatever image that tag points at.

The standard size is 1200x630 pixels. That 1.91:1 shape works for Facebook-style link previews and is accepted well by LinkedIn, X, Slack, Discord, and most chat apps. If you only make one social preview image, make it 1200x630 and test the crop before launch.

The 1200x630 layout

Two things matter: the full 1.91:1 frame and the center crop.

For normal link previews, leave 60 to 80 pixels around the outer edge. That keeps text away from rounded corners, tight cards, and mobile crops.

For square-ish previews, the visible crop is closer to the middle 630x630 area of the canvas, roughly x=285 to x=915. If the logo must survive that crop, keep the essential mark and short title inside about x=315 to x=885 and y=80 to y=550. A split layout with the logo at far left and text at far right can look good in Slack but fail when another app crops the center.

Keep type at 60px or larger so it stays legible when the preview shrinks in a chat sidebar. Solid brand color is the safest background. A gradient works. A photo behind text is risky because contrast changes across crops.

A working 1200x630 recipe

You need a clean logo file, a short line of text, and one brand color. That is usually enough. Build the layout to actual numbers, not vibes:

• Canvas: 1200 wide, 630 tall
• Background: your primary brand color, full bleed
• Logo: fit inside a 360x180 box without stretching
• Title text: 60 to 72px in your brand display font
• Subtitle or domain: 26 to 32px, lower contrast
• Safe area: 80px on every side, nothing important crosses into it

For a horizontal wordmark, put the logo left and the title right. For a square icon, center the mark and put the title below it. For a tall badge, shrink it into the 360x180 box and use more whitespace. Use the reversed logo on dark backgrounds and keep the original clearspace around the mark.

If the logo is sharp, the title is readable at 300px wide, and the image survives a center-square crop, it is good enough for launch. Nobody opens Slack, studies the kerning, and rewards you for restraint. They either recognize the page or they do not.

If you do not want to open Figma for this, use the OG image generator and move on. For the logo file-format side, the PNG vs SVG guide explains why your SVG source still needs to become a PNG preview image.

Platform specs

Treat these as practical targets, not promises. Platform crops, validators, and caches change, so test before launch.

Build one image to the 1200x630 convention, then check the places you care about. A CTA pinned to the bottom-right may look fine in Slack and disappear in a tighter crop.

Google is different. It may use og:image, schema image fields, or another page image, but selection is automated. For Google Search or Discover, use a page-relevant image, product screenshot, or article visual with light branding. Google's Discover guidance recommends large, relevant images and says to avoid generic images like a site logo or text-heavy images in og:image or schema markup.

File size and format

Save as PNG. JPG works too, but PNG handles flat colors and crisp logos better. Hard caps vary by platform, so aim under 1 to 2MB unless you know a specific target allows more.

Use sRGB color space. Display P3 and Adobe RGB sometimes render with shifted colors on the receiving platform.

Do not use SVG for the OG image, even though SVG is your logo source format. Social platforms either ignore SVG or rasterize it themselves at the wrong size. Always export to PNG before adding the og:image meta tag.

Wiring it up

Once you have the PNG, upload it somewhere stable: your site's /public directory, a CDN, or your blog's media folder. Use a full HTTPS URL that opens without login, redirects, hotlink blocking, or a weird content type. Then add this to the head of any page you want previewable:

<meta property="og:title" content="Page title" />
<meta property="og:description" content="One short page description." />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Preview image for Page title" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page title" />
<meta name="twitter:description" content="One short page description." />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />
<meta name="twitter:image:alt" content="Preview image for Page title" />

The Open Graph protocol requires the core title, type, image, and URL fields. The image width, height, type, and alt text make the preview easier for platforms to parse. The Twitter card tag tells X to use the large preview instead of the small thumbnail.

If you maintain separate OG images per page (recommended for blog posts), use a different og:image URL on each. If you only want one site-wide, set it once in the site's default head.

Test before launch

The most annoying OG image problems are cache problems. Slack, LinkedIn, Facebook, and X may keep the first image they scraped until you force a refresh.

• Open the image URL directly in a private window
• Paste the page URL into Slack or Discord
• Run the URL through LinkedIn Post Inspector
• Run it through Facebook Sharing Debugger
• If the old image keeps showing, upload the replacement under a new filename

The 1.91:1 convention is stable. Platform behavior is not. Test the final URL, not just the image file.

When you're packaging the preview image alongside the rest of the brand kit, include it with favicon files, color values, and social profile images. The brand kit handoff post covers the ZIP layout a developer expects, and the social media sizing guide covers the avatar and cover-photo sizes that are separate from OG images.

Make one before you need it

Create the preview when the logo is approved, not the morning of the launch post. If Slack or LinkedIn scrapes the wrong image first, you may spend more time clearing caches than making the image. Use the OG image generator, export the PNG, add the tags, and test the live URL.