Article cover & banner generator
Build cover images at the right size for Open Graph, Facebook, YouTube or Instagram: gradient or your own photo, add a headline and logo, then download a PNG.
The photo is processed inside your browser and never uploaded anywhere.
Darken the photo so the text stands clear of it.
The preview is scaled down to fit; the downloaded file is at the full size you picked.
Step by step
Pick a canvas size
Choose by where it is going, not by eye: 1200×630 for Open Graph and Facebook, 1600×900 for X, 1280×720 for a YouTube thumbnail, 1080×1080 for a square Instagram post and 1080×1920 for a story. The downloaded file is exactly that many pixels; the preview is only scaled down to fit the screen.
Type the text
The headline wraps to the canvas width, and you can break lines yourself with Enter. The small label on top suits a post type (TUTORIAL, NOTES), and the footer line suits a domain. All three can be left blank.
Choose a background
Press a preset and you are done, or set it yourself: a two-colour gradient with a direction slider, a solid colour, or your own photo. With a photo, pull the overlay darkness slider until the text stands clear of it.
Add a logo if you want one
The logo sits above the label and headline, sized with a slider. Use a PNG with a transparent background; an image with a white background shows up as a white square on the colour.
Download the PNG
The file saves at the size you picked, and the filename is derived from the headline with accents stripped, so it drops straight into a repo as an image name.
Frequently asked questions
No. The browser reads the file straight off your disk and paints it onto a canvas on your own machine. This is a static page with nothing on the other end to receive a file. Close the tab and the image is gone from memory.
Use 1200×630. That is the 1.91:1 ratio Facebook, LinkedIn and most
other readers of the og:image tag expect, and it is the safest size because it gets
cropped the least.
The same size works for messaging apps that show a link preview.
Because the photo fills the canvas the way cover works: scaled up until it covers the frame, then trimmed, keeping the original proportions. The alternative is squashing it to fit, which distorts faces. To keep the whole photo, crop it to the canvas ratio before uploading.
Pull the overlay darkness slider up. It lays a dim black layer between the photo and the text, so light text stands out while the photo still reads. Around 40-60% suits most photos; a busy, bright photo needs more.
Download the PNG, drop it into your site's image folder, then point the
og:image and twitter:image tags at its full path. Use an absolute URL
(https://...) rather than a relative path - that is the single most common reason a
preview image fails to show.
It wraps to the canvas width, and the headline size slider brings it down if it runs to too many lines. Honestly though, a cover headline should be short: past three lines nobody finishes it in a feed.
This tool runs entirely on your own machine. Nothing is sent to a server or anywhere else.