Resize Image for Facebook Cover (820x312) - Mobile Safe Zone Preview | AllImgTools<br>Resize Image for Facebook Cover Photo (820x312)<br>Pre-set to Facebook's 820 x 312 cover dimensions with side-by-side desktop and mobile preview. See the mobile crop and profile-picture overlap zone before downloading.<br>Pre-configured: 820 x 312px (Facebook Cover)

Drag & drop an image to resize, or click to browse<br>Drag & drop, paste from clipboard, or click to browse. Supports JPG, JPEG, PNG, WEBP, GIF, BMP, SVG, TIFF<br>Choose a file<br>Files never leave your browser · ⌘V to paste a screenshot

Mobile crop preview<br>See your cover on desktop and mobile<br>Facebook shows the same upload at different aspect ratios on desktop (820 x 312) and mobile (640 x 360 with the edges cropped). Upload your design to see what survives on each device and where the profile picture overlaps.

Upload your cover design<br>JPG, PNG, or WebP. Works best at 820 x 312 or 1640 x 624.<br>Choose a file<br>Files never leave your browser · ⌘V to paste a screenshot

The Mobile Crop Problem: Why 820 x 312 Is Not Enough<br>Facebook cover photos are the only major Facebook image where the desktop and mobile clients render different rectangles of your upload. Profile pictures, feed posts, and ads all crop the same way regardless of device. Cover photos are special because Facebook tries to fit the same upload onto two screens with very different aspect ratios.<br>Desktop renders at 820 x 312 pixels (aspect ratio 2.63:1). Mobile renders at 640 x 360 pixels (aspect ratio 1.78:1, the same as 16:9 video). To get from one to the other, Facebook crops about 90 pixels off each side of your image. The vertical area also expands slightly. The practical consequence: if your cover photo has important content within 90 pixels of the left or right edges, mobile viewers will not see it. And since most Facebook traffic is mobile, your cover's effective viewport is the central 640 px, not the full 820.<br>This tool's dual-preview shows you the desktop and mobile crops side by side so you can see what survives before downloading.

The Safe Zone: The Only Number That Matters<br>The safe zone is the central 640 x 312 pixel rectangle of your 820 x 312 design. Anything inside the safe zone stays visible on every device. Anything outside might be clipped on mobile or covered by the profile picture.<br>The full 820 px width is only visible on desktop. The middle 640 px is the universal cross-device area. The outer 90 px on each side becomes decorative background on mobile (it might be visible, it might not, depending on Facebook's exact mobile renderer version).<br>If you remember nothing else: design at 820 x 312 but keep all important content (text, logos, faces) inside the central 640 x 312 rectangle. Use the outer 90 px on each side for background extension only.

The Profile Picture Overlap Zone<br>Facebook overlays the profile picture on top of the cover photo. The position differs by device. On desktop, the avatar sits bottom-left as a 168 x 168 px circle, centered approximately 36 px from the left edge and 90 px from the bottom. The covered area is roughly the bottom-left 204 x 180 pixels. On mobile, the avatar moves to the bottom-center as a 100 x 100 px circle, centered horizontally and 50 px from the bottom.<br>The simplest rule that handles both: avoid placing critical content in the bottom 25% of your cover. Use that area for decorative background only. If you absolutely need content in the bottom of the cover, place it in the bottom-right where neither desktop nor mobile avatar covers it.

What Facebook Does to Your Cover After Upload<br>Every cover photo you upload goes through Facebook's image pipeline. Knowing what the pipeline does helps explain why your cover sometimes looks worse than the file you uploaded.<br>Facebook converts your cover to JPEG even if you uploaded PNG and re-encodes at approximately 70-85% quality (served as WebP to browsers that support it). The result is a file roughly 30-50% smaller than your source. The compression hits photographs minimally but hits sharp-edged graphics (text, logos) hardest. If your text looks soft or has color fringes around the letters after upload, this is the cause.<br>Facebook also generates several resampled versions for different display contexts (news feed thumbnails, mobile cards, desktop profile). Each is independently encoded. Uploading at 2x (1640 x 624) gives Facebook room to render crisply on Retina displays without upscaling.<br>Finally, Facebook converts wide-gamut color profiles (Adobe RGB, ProPhoto) to sRGB, which shifts saturated colors. Always export your cover as sRGB JPEG at 90%+ quality.

Pre-Upload Checklist<br>1. Design at exactly 820 x 312 or 1640 x 624 (2x for Retina).<br>2. Keep all important content inside the central 640 x 312 safe zone.<br>3. Avoid placing critical content in the bottom 25% (profile picture overlap).<br>4. Export as JPEG at 90%+ quality with sRGB color profile.<br>5. Keep file size under 2 MB for reliable upload.<br>6. Convert HEIC photos to JPG...