Generate Social Media Images with AI
OG images, Twitter cards, LinkedIn previews, and profile avatars — all from one icon generation.
Why Social Preview Images Matter
When someone shares a link to your site on Twitter, LinkedIn, Slack, iMessage, or Discord, the platform fetches your Open Graph image and displays it as a preview card. If you have not set one, you get a blank box or a generic placeholder. The link looks broken, even though your site works fine.
The difference in click-through rate between a link with a proper preview image and one without is significant. A well-designed OG image makes your link look intentional and professional. It is one of those things where the effort-to-impact ratio is absurdly high: five minutes of work can improve every link share for the lifetime of your site.
Platform-Specific Size Reference
Each platform has its own preferred dimensions. Some are flexible within a range, others are strict. Here is what actually works in practice:
| Platform | Image Type | Size (px) | Aspect Ratio | Max File Size |
|---|---|---|---|---|
| Open Graph (Facebook, Slack, Discord) | og:image | 1200x630 | 1.91:1 | 8 MB |
| Twitter / X (summary_large_image) | twitter:image | 1200x628 | 1.91:1 | 5 MB |
| Twitter / X (summary) | twitter:image | 240x240 | 1:1 | 5 MB |
| og:image | 1200x627 | 1.91:1 | 5 MB | |
| og:image | 1000x1500 | 2:3 | 20 MB | |
| og:image | 300x200 min | ~1.91:1 | No strict limit |
The magic number is 1200x630
Profile Avatars and Square Icons
Social platforms also use square or circular profile images. If you are setting up brand accounts or need consistent avatars across platforms, here are the sizes that matter:
Twitter / X
Profile photo, displayed as circle
Profile photo, displayed as circle
Profile photo and company logo
Profile photo, displayed as circle
YouTube
Channel avatar, displayed as circle
Discord
Server icon, displayed as circle
Circular vs. Square Display
Most platforms display profile images as circles. Your source image should still be square — the platform clips it. Keep your logo or symbol well within the center of the image. Content in the corners will be cut off by the circular crop.
A safe rule: if your content fits within a circle inscribed in the square, it will survive every platform's cropping. That means keeping all meaningful content within the inner ~70% of the canvas diameter.
Meta Tags for Social Previews
Drop these tags in your HTML <head> to control how your links appear when shared. The OG tags cover most platforms; the Twitter-specific tags override OG values on Twitter/X.
<!-- Open Graph (Facebook, LinkedIn, Slack, Discord, iMessage) -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description of the page." />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yoursite.com/page" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description of the page." />
<meta name="twitter:image" content="https://yoursite.com/twitter-image.png" />Use absolute URLs for images
/images/og.png will not work — you need the full URL including the protocol and domain: https://yoursite.com/images/og.png. This is a common source of "why is my preview image not showing up" bugs.Next.js / React Metadata
If you are using Next.js, you can set these in your metadata export or via the generateMetadata function. Next.js handles rendering the meta tags:
export const metadata = {
openGraph: {
title: 'Your Page Title',
description: 'A brief description.',
images: [
{
url: 'https://yoursite.com/og-image.png',
width: 1200,
height: 630,
alt: 'Preview of Your Page',
},
],
},
twitter: {
card: 'summary_large_image',
title: 'Your Page Title',
description: 'A brief description.',
images: ['https://yoursite.com/twitter-image.png'],
},
}Best Practices for Social Preview Images
Keep text minimal
Preview images are often rendered at small sizes — especially on mobile. Long text becomes illegible. Stick to your brand name or a short tagline. Let the og:title and og:description meta tags handle the details.
Use high contrast
Social feeds are visually noisy. Your preview image competes with photos, ads, and other shared links. High contrast between your icon/text and the background helps it stand out. Avoid light gray on white or dark gray on black.
Test across platforms
Each platform crops and scales differently. Facebook shows a wider crop than Twitter. LinkedIn sometimes caches old images aggressively. Use debugging tools: Facebook's Sharing Debugger, Twitter's Card Validator (deprecated but cached previews still work via tweet compose), and LinkedIn's Post Inspector.
Watch file size
Twitter rejects images over 5 MB. Facebook allows up to 8 MB but recommends under 1 MB for fast loading. Compress your PNGs or use JPEG for photographic images. The Iconello download is already optimized — PNG files are compressed without visible quality loss.
What Iconello Generates
- 1200x630 Open Graph image (works on Facebook, LinkedIn, Slack, Discord)
- 1200x628 Twitter summary_large_image card
- 512x512 square icon for profile avatars and social accounts
- All generated from the same design — consistent branding across platforms
- Compressed PNGs under 1 MB for fast loading
Frequently Asked Questions
Can I use the same image for og:image and twitter:image?
Yes, and many sites do. If you use a 1200x630 image for og:image and set your Twitter card type to summary_large_image, Twitter will use the og:image as a fallback when twitter:image is not set. The 2-pixel height difference (630 vs 628) is imperceptible in practice.
Why is my preview image not updating after I changed it?
Social platforms cache OG images aggressively. Facebook caches for about 7 days. LinkedIn can hold onto a cached image for weeks. To force a refresh, use each platform's cache invalidation tool (Facebook Sharing Debugger, LinkedIn Post Inspector) or change the image URL by adding a version query parameter like ?v=2.
Should I use PNG or JPEG for social images?
PNG for icons, logos, and images with text or sharp edges. JPEG for photographs or images with complex gradients. Social platforms re-compress images anyway, so an overly large source file does not improve quality — it just slows down the initial crawl.