Realm by Rook|Utilities
    OG Image Generator

    OG Image Generator

    Create 1200×630 Open Graph social-share images with title, subtitle, and gradient presets

    Your image is processed entirely in your browser — nothing is uploaded or stored on our servers. It's cleared from memory when you leave this page or click Clear.
    Background
    Logo overlay
    Final size
    —
    Recommended: < 5 MB for most platforms; < 300 KB for fast feeds.

    Você também pode gostar

    Color Picker

    Pick colors and get hex, RGB, HSL values

    Color Converter

    Convert between HEX, RGB, HSL, and CMYK

    Gradient Generator

    Create beautiful CSS gradients

    About the OG Image Generator

    Open Graph images are the thumbnails that appear when your link is shared on LinkedIn, Facebook, Slack, or WhatsApp. A bad OG image kills click-through. This generator builds a clean, modern 1200×630 image with title + subtitle + domain label — ready to drop into your page's og:image tag.

    Features

    How it works

    1. Enter title, subtitle, and domain.
    2. Pick a preset or set custom gradient colors.
    3. Click 'Download 1200×630 PNG'.
    4. Reference it as og:image + twitter:image in your page &lt;head&gt;.

    Use cases

    Frequently asked questions

    What size should OG images be?

    +

    1200×630 — universal sweet spot. Facebook, LinkedIn, Slack all honor it; Twitter/X crops slightly on summary_large_image. Keep critical text in the center-left for safe cropping.

    How do I use the output?

    +

    Upload the PNG somewhere publicly accessible (Cloudflare R2, S3, your Next.js /public folder). Reference it in your &lt;head&gt;: &lt;meta property="og:image" content="https://yoursite.com/og.png" /&gt;.

    Why not use a programmatic OG-image API?

    +

    You should for high-volume sites (Vercel's @vercel/og, Satori, etc.). This tool is for one-offs and when a designer wants a visual editor.

    Can I upload a logo?

    +

    Not in v1 — the design intentionally uses typography + gradient for simplicity. Add logo overlay in Figma / Photoshop if needed.

    Does it work for Twitter Cards?

    +

    Yes — summary_large_image cards crop to 2:1 (1200×600), which 1200×630 covers with minor top/bottom letterbox.