liminfoOG Image Maker
Free web tool: OG Image Maker
Preview (1200 x 630)
About OG Image Maker
The OG Image Maker is a browser-based tool for generating Open Graph images at the standard 1200 x 630 pixel size required by Facebook, Twitter, and LinkedIn. Enter a title and optional subtitle, choose a background color from eight presets or pick any custom hex color, select white or black text (or any custom color), and watch the canvas update in real time. When you are satisfied with the design, click Download PNG to save the image directly from the browser canvas without any server upload.
Content creators, bloggers, and developers use this tool to quickly produce og:image assets for articles, blog posts, documentation pages, and social announcements. A proper og:image dramatically increases the visual impact of shared links — pages without one display as plain text links with no thumbnail, while a high-quality image card can increase click-through rates significantly. The standard 1200 x 630 size ensures the image renders correctly at full size on Facebook, Twitter summary_large_image cards, and LinkedIn posts.
Technically, the tool uses the HTML5 Canvas API to render the image entirely in the browser. The title text is drawn with bold 56px sans-serif font with automatic line wrapping when the text exceeds 1000 pixels wide, ensuring long titles break gracefully across multiple lines. The subtitle is rendered below in 28px font at 80% opacity for visual hierarchy. The canvas element is displayed at responsive width with a fixed 1200:630 aspect ratio, and the final PNG is generated via canvas.toBlob() without any server interaction.
Key Features
- Generates images at the standard 1200 x 630 pixel Open Graph size for all major social platforms
- Live canvas preview that updates instantly as you type title, subtitle, or change colors
- Eight background color presets (Black, White, Blue, Green, Red, Purple, Orange, Navy) plus custom color picker
- White and black text color options plus a custom color picker for full creative control
- Automatic title text wrapping when text exceeds canvas width — no manual line breaks needed
- Subtitle rendered with 80% opacity below the title for clean visual hierarchy
- One-click PNG download via canvas.toBlob() — no server upload, no account required
- Dark mode support and fully responsive canvas preview that scales to any screen width
Frequently Asked Questions
Why is 1200 x 630 pixels the standard size for og:image?
1200 x 630 pixels (roughly 1.91:1 aspect ratio) is the size recommended by Facebook's Open Graph specification and is the optimal size for Twitter's summary_large_image card. It is large enough to look sharp on retina displays while being the most widely supported size across Facebook, Twitter, LinkedIn, Slack, iMessage, and WhatsApp link previews.
How do I use this OG image in my website?
Download the PNG, upload it to your web server or a CDN (like Cloudflare R2, AWS S3, or Vercel's public folder), and reference the public URL in your page's <meta property="og:image" content="https://yourdomain.com/og-image.png" /> tag. Make sure the URL is fully qualified (starting with https://) and publicly accessible without authentication.
Does this tool support custom fonts?
Currently the tool uses the browser's default system sans-serif font for maximum compatibility and rendering speed. This typically renders as Inter, Helvetica, or Arial depending on the operating system. For custom branded fonts, you would need a more advanced image generation tool or a server-side approach using tools like Puppeteer or Vercel's @vercel/og library.
Can I generate multiple OG images for different pages?
Yes — simply change the title and subtitle text between downloads. Each time you click Download PNG, the current canvas state is saved. There is no limit to how many images you can generate in a session.
What is the difference between an og:image and a Twitter Card image?
The og:image tag is used by Open Graph-supporting platforms including Facebook, LinkedIn, and many others. Twitter uses twitter:image specifically for its Card previews, but it falls back to og:image if twitter:image is not set. In practice, setting og:image covers most social platforms, and you only need twitter:image if you want a different image for Twitter specifically.
The text in my title is getting cut off — what should I do?
The tool automatically wraps text that exceeds 1000 pixels wide, so long titles will flow onto multiple lines rather than being cut off. If the overall text block is taller than the canvas allows, consider shortening your title to 2-3 lines maximum. A good og:title is typically 40-70 characters for best readability on all platforms.
Can I add a logo or custom image to the OG image?
This tool focuses on text-based OG images with solid color backgrounds for simplicity and speed. For OG images with logos, photos, or more complex layouts, consider Canva, Figma, or — for developers — the @vercel/og library which lets you generate OG images with JSX and custom fonts server-side.
What file format does the tool download?
The tool downloads images as PNG files named "og-image.png". PNG is lossless and supports full transparency, making it a good choice for OG images. JPEG would produce smaller files but PNG ensures no quality degradation, which matters for text-heavy images where compression artifacts can make text harder to read.