Utilko logo Utilko

OG Image Generator

Free OG image generator. Type a title, pick a preset, download a 1200×630 PNG ready for Twitter, LinkedIn, Facebook previews. No signup, runs in your browser.

  • 100% free
  • No signup
  • Runs in your browser
Common uses: og image generator · open graph image generator · social media image generator · twitter card image · 1200x630 image generator

Used 19.9K times today

How to use the downloaded PNG
  1. Upload it to your site's public folder (e.g. /public/og.png).
  2. Reference it in your page's <head>:
    <meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yoursite.com/og.png">
  3. Test the preview with opengraph.xyz or Facebook's Sharing Debugger.

How to Use OG Image Generator

  1. 1

    Type your title and subtitle

    Enter the headline + a short tagline. The preview updates as you type.

  2. 2

    Pick a preset

    Choose from preset visual styles (gradient, dark, brutalist, etc.) and tweak colors if you want.

  3. 3

    Download as 1200×630 PNG

    Click Download to save the image. Drop it in your site's public folder and reference it in your og:image tag.

Frequently Asked Questions

What size should an OG image be?
The Open Graph spec recommends 1200×630 pixels (1.91:1 aspect ratio). This tool generates at that exact size. The same image works for Twitter Card summary_large_image and LinkedIn previews.
Does this tool send my text anywhere?
No. Everything runs in your browser using HTML Canvas. Nothing leaves your device — verifiable in DevTools Network tab.
Why use 1200×630 specifically?
It is the largest size Facebook and LinkedIn render without cropping, while keeping file size reasonable. Smaller images get upscaled and look blurry; larger ones get downsized inconsistently across platforms.
Can I add my logo or a custom font?
The presets use system fonts that render consistently in the canvas output without bundling. Future versions may support logo upload — drop a feature request via the Utilko contact channels.

Embed This Tool

Add this tool to your website for free. Just copy and paste the code below:

<iframe src="https://utilko.com/embed/og-image-generator/" width="100%" height="500" frameborder="0" title="OG Image Generator"></iframe>

About OG Image Generator

The OG Image Generator creates a 1200×630 social preview image directly in your browser. Type a headline, pick a preset, download a PNG ready to drop into your og:image meta tag. No signup, no cloud upload, no watermark.

Most existing OG image generators either require a paid plan, render server-side with a 2-5 second delay, or output JPEGs that lose quality on social previews. Utilko's tool runs entirely client-side via HTML Canvas — the preview updates as you type, and the download is a clean PNG.

Pair with the Open Graph meta tag generator for the matching HTML, and the favicon generator for your site icon.

More SEO & Web Tools Tools

Meta Tag Generator

Generate complete HTML meta tags for SEO including title, description, robots, viewport, and canonical tags. Preview how your page appears in search results.

Open Graph Generator

Generate Open Graph and Twitter Card meta tags for rich social media previews. Preview how your link looks when shared on Facebook, Twitter, and LinkedIn.

Robots.txt Generator

Generate a valid robots.txt file for your website. Control which pages search engine crawlers can access and set your XML sitemap location.

Sitemap Generator

Generate a valid XML sitemap for your website. Enter your URLs, set priority and change frequency, and download a standards-compliant sitemap.xml.

Schema Markup Generator

Generate JSON-LD structured data markup for articles, products, FAQs, breadcrumbs, and more. Boost rich snippets in Google search results.

Google Fonts Previewer

Preview any Google Font with your own custom text. Browse font weights, styles, and sizes, then copy the embed code for your website.

CSS Gradient Generator

Create beautiful CSS linear, radial, and conic gradients with a visual editor. Copy the CSS gradient code for direct use in your stylesheet.

Box Shadow Generator

Visually design CSS box shadows with controls for offset, blur, spread, color, and inset. Copy the box-shadow CSS property instantly.