Your files never leave your device. All processing happens locally in your browser.
How do I make a Facebook cover photo the right size with safe-zone guides?
This tool gives you a canvas locked to Facebook’s real desktop cover size — 820×312 px — and exports a crisp 1640×624 (2×) PNG via <code>canvas.toBlob</code> so it stays sharp on retina screens. Start from a template or a solid / gradient / pattern / uploaded-image background, add editable text, shape and image layers, then drag them into place. Toggleable overlays mark the areas Facebook crops or covers: the full desktop frame (820×312), the mobile centre-crop (phones show only the centre ~640 px wide, shaving ~90 px off each side), the cross-device safe zone (~640×312) and the profile-photo overlap in the lower-left. Everything runs in your browser — nothing is uploaded, and the guides are never baked into the export.
Canvas fixed to Facebook’s 2026 cover spec: 820×312 design, exported at a crisp 1640×624 (2×) PNG
Safe-zone overlay: desktop frame, mobile ~640-wide centre-crop, centre ~640×312 safe zone, lower-left profile-photo overlap — each toggleable and preview-only
Editable text (system fonts, weight, alignment, colour, rotation, shadow), shapes and uploaded-image layers with drag-to-move
Solid / gradient / pattern / photo backgrounds; images use object URLs revoked on cleanup and never leave the browser
100% client-side — no server, upload or CDN; download PNG or copy to clipboard
What is
Facebook Cover Maker
A Facebook cover maker is a design tool for building the wide banner image that sits at the top of a Facebook Page or profile. Facebook displays the cover at 820×312 pixels on desktop (roughly a 2.63:1 strip) but renders it differently on phones, showing only a taller centre-crop about 640 px wide — so about 90 px is shaved off each side and the reliably-visible area is the centre ~640×312. On desktop the profile picture overlaps the lower-left corner of the cover. Unlike a plain image resizer, a good cover maker accounts for that layout and exports at 2× (1640×624) for sharpness on retina screens. This tool renders and exports the cover entirely on an HTML canvas in the browser and overlays those safe zones as toggleable, preview-only guides so key text and logos stay clear of Facebook’s device cropping and the avatar overlap.
Design at 820×312 px (Facebook’s desktop cover size). For sharpness on retina screens, upload at 2× — 1640×624 — which is exactly what this tool exports.
Facebook displays a Page or profile cover at 820×312 pixels on desktop, which is roughly a 2.63:1 strip. Because many screens are high-density (retina), the practical recommendation is to design at 820×312 but upload at twice that resolution, 1640×624, so the image stays crisp after Facebook re-compresses it. This tool keeps the editing canvas at 820×312 and exports the PNG at exactly 1640×624 via <code>canvas.toBlob</code>, so what you download matches the spec. Keep the file reasonably optimised for fast loading. These sizes are current best estimates — Facebook changes them without notice, so verify on your live Page.
The profile picture overlaps the lower-left on desktop. Phones show only the centre ~640 px wide (about 90 px is cut off each side), so keep key content in the centre ~640×312 safe zone.
On desktop Facebook paints your profile picture over the lower-left corner of the cover, so anything placed there is hidden behind the avatar. On phones the cover is cropped differently: instead of the full 820-wide desktop strip, mobile shows a taller centre-crop only about 640 px wide, meaning roughly 90 px is shaved off each side. The practical rule is to keep logos and text inside the centre safe zone (about 640×312) and out of the lower-left avatar area. This tool draws the desktop frame, the mobile centre-crop, the cross-device safe zone and the profile-photo overlap as toggleable overlays so you can check your layout before you export. They are guidance, not a guarantee — the exact pixels vary by device, browser and window size.
No. Your cover is composited on a local canvas and any photo you add is held as an in-browser object URL revoked on cleanup. Nothing is uploaded, stored or sent to a server.
Privacy is structural. The cover is drawn on an HTML canvas in your browser, and the PNG is produced locally with <code>canvas.toBlob</code> — there is no server, upload, database or logging in the processing path, and no CDN. When you add a background or layer image, the browser creates an in-memory object URL and draws straight from it; that URL is revoked automatically when you replace the image, delete the layer, reset, or leave the page, so nothing lingers in memory or on disk. The tool works offline once cached, and closing the tab discards your design. The only optional network use anywhere on the site is consent-gated advertising, which never sees your images. The safe-zone guides are drawn only in the preview and are never included in the exported file.
Use bold type and keep it centred inside the ~640×312 safe zone. Small or edge-placed text gets cropped or becomes unreadable on phones.
Because phones crop the sides of the cover and shrink it, thin or edge-placed text tends to disappear. Keep any essential wording bold and reasonably large in the 820×312 coordinate space, and place it inside the centre safe zone, well away from the lower-left profile-photo overlap. This tool’s text layers use large default sizes, expose a font-size slider, and support weight, alignment, a drop shadow and uppercase so your text stays legible over busy backgrounds; a darken-overlay control on image backgrounds helps too. Preview with the mobile-crop guide on, then check the final PNG on a real phone — that is the only way to be sure, since Facebook can re-compress the upload and colours may shift slightly.
Detailed Explanation
📖How It Works
What the Facebook Cover Maker Does
The Facebook Cover Maker is a browser-based canvas editor for the wide banner at the top of a Facebook Page or profile. It locks the design canvas to Facebook’s desktop cover size — 820×312 px — and exports a crisp 1640×624 (2×) PNG so the image stays sharp on retina screens after Facebook re-compresses it. You build a design from a template or a solid / gradient / pattern / uploaded-image background, add editable text, shape and image layers, and drag them into place. Toggleable overlays mark the areas Facebook crops or covers (desktop frame, mobile centre-crop, safe zone, profile-photo overlap) so your key content stays visible. Everything is composited locally; nothing is uploaded.
Design canvas fixed to Facebook’s 2026 cover size: 820×312 px
Exports a crisp 1640×624 (2×) PNG via canvas.toBlob for retina sharpness
Backgrounds: solid, gradient, pattern or an uploaded photo (cover/contain + darken)
Editable text, shape and image layers with drag-to-move and reorder
📋Use Cases
Who Uses It and Why
Businesses, creators, community organisers and individuals use it to make an on-brand Facebook cover that survives cropping across devices. A business centres its Page name, tagline and a call-to-action; a personal profile centres a name and a short line; a sale or event announces an offer or a date; a community banner frames a group or cause. The workflow is: pick a template or background, add and arrange text / logo / image layers inside the centre safe zone and away from the lower-left avatar, toggle the mobile-crop and profile-photo guides to confirm nothing important is hidden, then export the 1640×624 PNG (or copy it) and upload it to Facebook. Because it is offline and deterministic, you can iterate quickly without accounts or watermarks.
Business, personal, sale, event, quote and community templates
Keeps logos/text clear of the lower-left avatar and the mobile side-crop
No account, no watermark, no signup — download or copy the PNG
Fast iteration; works offline once cached
⚙️Methodology
How Rendering and the Safe Zones Work
The tool reuses the shared web-banner engine (webBannerEngine.ts): layers store normalised geometry (x, y, w, h as fractions of the banner, font size as a fraction of the shorter side), and a single drawBanner() routine paints both the live preview and the export, so what you see is what you download. A thin cover engine (facebookCoverEngine.ts) adds the 820×312 design size, the 2× 1640×624 export, and the safe-zone geometry: a centre safe zone of ~640×312 (visible on every device), the mobile centre-crop that keeps only the middle ~640 px wide (about 90 px shaved off each side), the full 820×312 desktop frame, and a lower-left profile-photo overlap (a rounded square ~168 px). Those guides are drawn onto the preview canvas only — the export path calls drawBanner without them — and every zone can be toggled independently.
One drawBanner() renders preview and export — WYSIWYG
Layer geometry is normalised, so text auto-fits and stays crisp when scaled to 2×
Safe-zone geometry: centre ~640×312, mobile 640-wide crop, desktop frame, avatar square
Guides are preview-only and never baked into the PNG
🔧Technical Details
Facebook Cover Facts (2026)
Facebook displays a Page or profile cover at 820×312 pixels on desktop (roughly a 2.63:1 strip). On phones it shows a taller centre-crop only about 640 px wide, so roughly 90 px is shaved off each side and the reliably-visible area is the centre ~640×312. Because many screens are high-density, the practical recommendation is to design at 820×312 but upload at 2× (1640×624) for sharpness, keeping the file well optimised for fast loading. On desktop the profile picture overlaps the lower-left corner of the cover, so keep logos and text clear of it. These are current best estimates; Facebook changes them without notice and they differ by device.
Desktop cover: 820×312 px (~2.63:1); upload at 2× (1640×624) for sharpness
Mobile shows only the centre ~640 px wide — ~90 px cut off each side
Reliably-visible cross-device area: centre ~640×312
Profile picture overlaps the lower-left on desktop — keep it clear
⚠️Limitations
Honest Limitations
This is a design and layout tool, not a Facebook integration: it cannot upload, post or set your cover for you, and it has no access to your account. The safe-zone guides are guidance, not a spec — Facebook’s exact crop and the profile-photo overlap change without notice and vary by device, browser and window size, so the overlay approximates the current layout rather than guaranteeing it. Colours can shift slightly after Facebook re-compresses your upload. It renders text with system font stacks only (no web fonts or CDN), so exotic typefaces from other apps are not available. Always preview the final PNG on a real phone before relying on it, since the mobile centre-crop is the most common way a cover gets its edges cut off.
Cannot upload or set your cover — export a PNG and upload it yourself
Guides approximate Facebook’s 2026 layout; exact pixels vary and change
Facebook re-compresses uploads — colours may shift
System fonts only (no external web fonts or CDN)
🔒Privacy & Security
Private by Design
Everything happens on your device. The cover is composited on an HTML canvas and the PNG is written locally with canvas.toBlob — there is no server, upload, database or logging in the processing path, and no CDN. Any background or layer image you add is held as an in-memory object URL and drawn straight from it; that URL is revoked automatically when you replace the image, delete the layer, reset, or leave the page, so nothing lingers. The tool works offline once cached, closing the tab discards your design, and the only optional network use anywhere on the site is consent-gated advertising, which never sees your images or your cover.
Cover composited on a local canvas; PNG via canvas.toBlob
Images use object URLs revoked on replace / delete / reset / unmount
No server, upload, database, logging or CDN in the processing path
Works offline once cached; closing the tab discards everything
Facebook cover zones (2026, current best estimates)
Zone
Where
Approx size
Keep clear?
Design canvas
Whole cover
820×312 px (desktop)
—
Export size
Whole cover
1640×624 px (2×)
—
Safe zone
Centre
~640×312 px
Put key content here
Mobile crop
Left & right sides
~90 px each
Yes — cut on phones
Profile photo
Lower-left
~168×168 square
Yes — avatar overlap
Facebook shows the full 820×312 on desktop but only the centre ~640 px wide on mobile, and paints the profile photo over the lower-left on desktop. Keep logos and text in the centre safe zone and preview on a real phone. Sizes are current best estimates and change without notice.
