OG image generator with 50 templates
Fill a template from any page, edit its fields, colours and fonts, download a 1200×630 PNG or JPEG. Made in your browser.
Templates 50 of 50
Edit content
Product layout
How to make an Open Graph image
Fill from a page or start blank
Paste a URL and press Fill to pull its title, description, logo, picture and brand colour into every template. Or press Sample and type over it.
Pick a template and edit
All 50 templates are drawn with your own content. Filter by picture or text and by style, click one to make it the preview, then edit the fields, colours and fonts that template offers.
Download the image
Choose PNG or JPEG, 1× (1200×630) or 2×, and press Download. Upload it and point og:image at its absolute https URL.
Good to know
- Keep the title under about 60 characters; every template clamps long text, but short reads better at thumbnail size.
- Turn on Safe zone to see the inner 1000×500 that no platform crops; keep the title, logo and button inside it.
- Most templates set the picture on a mat in its own edge colour so nothing is cut. Poster, Magazine-style and photo-led ones such as Restaurant, Workshop, News article and Link card crop it to fill.
- No picture? Filter the templates to Text only: Minimal, Gradient, Stripe, Big type, Dot grid, Terminal, Mesh, Code, Chat, Newspaper and more need none.
- The accent comes from the page's theme-color or its logo, and each template's backgrounds and buttons follow it until you set them. Reset clears every override.
- Export PNG for flat colour and text, JPEG for a photo-led card; both stay far under the 5 MB limit of LinkedIn and X.
- After uploading, put the absolute https URL in og:image (a relative path breaks every preview) and run the page through the meta tag checker to confirm it resolves.
Questions people ask
What size should an Open Graph image be?
1200×630 pixels, a 1.91:1 ratio. Facebook accepts up to 8 MB, LinkedIn and X up to 5 MB, and LinkedIn wants at least 1200×627. Every template here exports at exactly 1200×630, or 2400×1260 at 2× for sharper high-density screens, and keeps text inside the 1000×500 safe zone that no platform crops.
PNG or JPEG?
PNG keeps flat colour and text crisp, so it suits branded cards. JPEG at 80% quality is far smaller for photo-led cards. WebP is not read by every crawler and an animated GIF only shows its first frame, so stay with PNG or JPEG.
The image is uploaded but the preview is still blank. Why?
The most common cause is a relative og:image such as /images/og.png. Crawlers fetch your page in isolation and do not resolve it, so the tag must hold the absolute https URL, for example https://example.com/images/og.png. Then refresh Facebook's Sharing Debugger or LinkedIn's Post Inspector so their caches fetch the new picture.
Why do the edit fields change when I pick another template?
Each template declares what it draws. A listing shows a detail line for the price or stats, a blog post shows an author, a terminal has no picture. The editor lists only the fields and the colours and fonts that template uses, and your text carries over when you switch.
Why does my picture or logo not show in the template?
The image has to be fetched into your browser to be drawn. Most sites allow that, but some block hotlinking or every proxy. Upload the file instead with the Select button; it stays on your device.
Where does the accent colour come from?
From the page's theme-color tag when it has one, otherwise from the strongest colour in its logo. Light colours are darkened so white text stays readable. Pick a swatch or any colour to override it; each template's own backgrounds and buttons follow it until you change them.
Is anything uploaded?
No. The page is fetched into your browser, the template is drawn in your browser, and the image is produced there too. Uploaded files never leave your device. Choosing a Google font downloads that font from Google, nothing else.