# OG Image Generator
> Design 1200x630 social cards with multi-platform preview
Free OG image generator. 1200x630 Open Graph cards with multi-platform preview (Twitter, Facebook, LinkedIn, Slack). 6 templates, custom colors, fonts.
URL: https://tools.scoreroute.com/tools/og-image-generator/
Markdown: https://tools.scoreroute.com/tools/og-image-generator/.md
## Free OG Image Generator
1200x630 Open Graph cards with live multi-platform preview, ready-to-paste meta tags, and zero upload.
### Size Preset
### Template
### Text Content
### Background
### Typography
### Logo (optional)
### Download
### Generated Meta Tags
Paste inside your HTML ``:
### HTML Snippet (paste anywhere)
A complete `` snippet:
### Live Preview
### Multi-Platform Preview
Realistic card previews for each platform's actual layout
### Why OG Image Size Matters
The Open Graph protocol was created by Facebook in 2010 to control how URLs appear when shared. Without an explicit OG image, social platforms crawl the page and pick the largest available image — often a logo, sidebar thumbnail, or random hero — and crop it unpredictably. The result: low click-through, broken previews, off-brand appearance. A 1200x630 OG image with the right title and subtitle typically lifts share CTR by 30-150% versus no image.
### Platform OG Image Specs
#### Facebook
1200x630 recommended. Crops to fit when larger. Aspect ratio 1.91:1.
#### Twitter / X
summary_large_image: 1200x675 (or 1200x630). Crops to 1.91:1.
#### LinkedIn
1200x627 minimum. 1.91:1 ratio. PNG or JPG under 5 MB.
#### Slack Unfurl
1200x630. Crops to fit. PNG preferred for text-heavy cards.
#### Discord
1200x630 recommended. Embed displays at 16:9 aspect.
#### iMessage / WhatsApp
1200x630. Crops and resizes. PNG transparency preserved.
### What This Tool Does That Others Don't
- **Multi-platform preview in one view** — see Twitter, Facebook, LinkedIn, Slack previews side by side, not just a single canvas.
- **Ready-to-paste meta tags** — generated alongside the image with proper og:image, og:image:width, og:image:height, twitter:card.
- **100% browser** — no server, no upload, no signup, no watermark, no daily limit.
- **Auto-fit text** — long titles scale down automatically to fit the safe area.
- **5 templates** — modern, classic, gradient, photo-overlay, branded, minimal — switch in one click.
- **6 size presets** — Open Graph, Twitter, LinkedIn, Square, Portrait, Custom.
### How to Use
- Pick a **size preset** (Open Graph 1200x630 is the universal default).
- Choose a **template** or customize background, fonts, and colors in the Style tab.
- Type your **title and subtitle** — auto-fit keeps text inside the safe area.
- Verify the **multi-platform preview** matches your brand voice.
- Click **Download PNG**, upload to your site or CDN, then paste the copied meta tags.
### Best Practices
- **Title length:** Aim for 40-60 characters. Anything over 90 truncates on Twitter.
- **Subtitle length:** 80-120 characters. Facebook shows up to 2 lines.
- **Safe area:** Keep all text within the inner 80% (about 96px margin on a 1200x630 canvas). Twitter and Slack crop edges.
- **Brand visibility:** Include your brand or domain on the card — not just in metadata.
- **Contrast:** Title-to-background contrast ratio of at least 4.5:1 (WCAG AA) keeps text readable on small mobile previews.
- **File size:** Keep PNG under 1 MB for fastest social crawl. JPG at 80% quality is usually smaller.
### Frequently Asked Questions
**What is the correct OG image size?**
The standard Open Graph image size is 1200x630 pixels with a 1.91:1 aspect ratio. Facebook and LinkedIn both officially recommend this size. Twitter's summary_large_image card is 1200x675 (1.78:1). Our tool includes both as presets plus Square (1200x1200) and Portrait (1080x1350) for Instagram.
**Is the OG image generator really free?**
Yes. No signup, no email, no paywall, no watermark, no daily limit. The tool runs entirely in your browser using the HTML5 Canvas API. Your image is generated locally and never uploaded to any server.
**What does the multi-platform preview show?**
The preview shows how your OG image will look when shared on Twitter (summary_large_image card), Facebook (link preview), LinkedIn (article share), and Slack (Unfurl). Each card displays at the actual proportions used by that platform, with the correct title, description, and domain so you can verify your link preview before publishing.
**Can AI chatbots generate OG images?**
AI text models cannot produce PNG images at all. AI image generators can produce pictures but cannot output the exact 1200x630 dimensions with multi-platform safe areas, ready-to-paste meta tags, and platform-specific preview validation. This tool is purpose-built for the social-preview workflow and runs entirely offline.
**What meta tags should I copy?**
After downloading your PNG and uploading it to your site or CDN, paste these tags inside your ``: ``, ``, ``, ``, ``, ``. The tool generates these for you with one click.
**Why does my link preview look cropped on Twitter?**
Twitter crops uploaded images to a 1.91:1 ratio when displaying them. If your source image is taller than 1.91:1, the top and bottom get cut. Our Twitter 1200x675 preset produces a card that fills Twitter's preview without cropping. For maximum compatibility across platforms, use the Open Graph 1200x630 preset.
**Can I use a logo or brand image?**
Yes. Click the Logo upload field to add a PNG, JPG, or SVG. The logo is inlined as base64 and rendered on the canvas in real time. For best results, use a square logo with transparent background. The logo can be positioned and resized using the size slider.
#### Related Tools
- [Meta Tag Generator](/tools/meta-tag-generator/)
- [HTML to Image Converter](/tools/html-to-image/)
- [Poster Maker](/tools/poster-maker/)
- [Logo Maker](/tools/logo-maker/)
- [YouTube Thumbnail Downloader](/tools/youtube-thumbnail-downloader/)
- [Favicon Generator](/tools/favicon-generator/)
## References
- [Open Graph Protocol](https://ogp.me/)
- [Twitter Cards — Getting Started](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/getting-started)