Website Logo Size Guide: Dimensions for Every Platform

Why Logo Size Matters More Than You Think

Your logo appears in more places than your website header. It shows up in browser tabs, social media previews, email signatures, search results, and app icons. Each context has different size requirements, and a logo that looks sharp in one place can appear blurry, cropped, or distorted in another.

Getting logo sizes right is not just an aesthetic concern. A blurry favicon makes your site look unprofessional. An oversized header logo pushes important content below the fold. A logo that does not meet social platform requirements gets auto-cropped in ways you did not intend.

This guide covers the exact dimensions you need for every common use case in 2026, along with best practices for formats, resolution, and responsive behavior.

Website Header Logo Dimensions

The header logo is where most people start, and where the most confusion exists. There is no single "correct" size because it depends on your layout, but there are proven ranges that work well.

Recommended dimensions

• Horizontal logos — 250 to 400 pixels wide, 50 to 100 pixels tall. This fits comfortably in most navigation bars without dominating the header.
• Square or icon logos — 50 to 80 pixels on each side. These work well in compact headers and mobile navigation.
• Vertical or stacked logos — 150 to 250 pixels wide, 80 to 150 pixels tall. Best for centered layouts or hero sections rather than top navigation bars.

Retina and high-DPI displays

Modern screens (Apple Retina, most smartphones, 4K monitors) display at 2x or 3x pixel density. A logo that is 300 pixels wide on a regular screen needs to be 600 pixels wide in the actual file to look crisp on a Retina display. Always export your logo at 2x the display size as a minimum.

The cleanest solution is to use SVG format for your logo. SVGs are vector-based, meaning they scale to any size without losing quality. The file size is typically smaller than a PNG, and you never need to worry about resolution.

Favicon Sizes and Formats

Favicons appear in browser tabs, bookmarks, and on mobile home screens when someone saves your site. Modern browsers support multiple favicon formats and sizes, but you need at least these:

• favicon.ico — 32x32 pixels. The classic format that all browsers support. Some tools generate multi-size .ico files that include 16x16, 32x32, and 48x48 in one file.
• favicon-192.png — 192x192 pixels. Used by Android Chrome for the home screen icon.
• favicon-512.png — 512x512 pixels. Used by Android Chrome for the splash screen and PWA installs.
• apple-touch-icon.png — 180x180 pixels. Used by iOS when someone adds your site to their home screen.

Favicon design tips

Your favicon is displayed at extremely small sizes. A full wordmark logo will be illegible at 16x16 or 32x32 pixels. Instead, use a simplified version: the first letter of your brand, an icon element from your logo, or a simple geometric shape in your brand color.

Test your favicon at actual size by looking at your browser tab alongside other sites. If it is a blurry blob, simplify further.

Social Media Logo and Image Sizes

Each social platform has its own requirements for profile pictures and Open Graph images (the preview that appears when someone shares your link).

Profile pictures

• LinkedIn — 400x400 pixels (displays as a circle)
• X (Twitter) — 400x400 pixels (displays as a circle)
• Instagram — 320x320 pixels (displays as a circle)
• Facebook — 170x170 pixels on desktop, 128x128 on mobile (circle)
• YouTube — 800x800 pixels (circle)

Since all major platforms crop to a circle, make sure your logo or headshot fits within a circular area with adequate padding. Do not place important elements in the corners of a square image.

Open Graph (OG) images

When someone shares your website on social media, the OG image is what appears in the preview card.

• Recommended size — 1200x630 pixels. This works well across Facebook, LinkedIn, X, and most messaging apps.
• Twitter card — 1200x628 pixels (nearly identical, 1200x630 works fine for both).
• Keep text large — If your OG image includes text, use large font sizes. The image often displays small on mobile, and tiny text becomes unreadable.

Email Signatures and File Formats

Email signatures are rendered differently by every email client, making logo display unpredictable. Keep it simple.

• Recommended dimensions — 300 to 600 pixels wide, 50 to 150 pixels tall. Email clients will constrain wider images, potentially distorting them.
• File format — PNG with a transparent background. Some email clients do not render SVG, so PNG is the safe choice here.
• File size — Under 50KB. Large images trigger spam filters and slow email loading. Compress aggressively.
• Alt text — Always include alt text on your logo image. Many recipients have images disabled by default.

File formats: when to use what

Choosing the right format prevents quality loss and keeps file sizes minimal.

• SVG — Best for website headers, anywhere the logo is displayed on your own site. Infinitely scalable, tiny file size, supports animations. Use this as your default.
• PNG — Best for contexts that do not support SVG: email, social media uploads, favicons. Use PNG-24 for full color and transparency. Always compress with a tool like TinyPNG.
• WebP — Increasingly supported and offers better compression than PNG. Good as a next-gen alternative on your website, but always provide a PNG fallback.
• JPEG — Avoid for logos. JPEG does not support transparency and introduces compression artifacts around sharp edges and text, which are exactly what logos consist of.
• ICO — Only for the classic favicon file. Modern browsers also accept PNG favicons linked in the HTML head.

Quick reference table

Here is a summary of every logo size you need, organized by usage:

• Website header (horizontal) — 300x80px display, 600x160px file (2x), SVG preferred
• Website header (square/icon) — 60x60px display, 120x120px file (2x), SVG preferred
• Favicon (browser tab) — 32x32px, ICO or PNG
• Apple touch icon — 180x180px, PNG
• Android home screen — 192x192px and 512x512px, PNG
• Social media profile — 400x400px minimum, PNG or JPEG
• OG image (social sharing) — 1200x630px, PNG or JPEG
• Email signature — 300-600px wide, under 50KB, PNG

When building your site with tools like mnml.page, the platform handles responsive scaling and retina display optimization automatically. You just need to upload a high-resolution version of your logo (ideally SVG), and it adapts to the correct size for headers, favicons, and social previews.

Getting your logo sizes right is a one-time investment that pays off every time someone encounters your brand, whether in a browser tab, a Google search result, or a social media share. Take thirty minutes to export all the sizes listed above, and you will never have to deal with a blurry or cropped logo again.