Logo Size for Website: Complete Dimension Guide

Your logo appears in more places than you probably realize — site header, favicon, social share cards, email signatures, mobile home screens, and browser tabs. Each context has its own ideal logo size for website use, and getting any of them wrong means a blurry icon, a cropped wordmark, or a stretched emblem that makes your brand look careless.

This guide gives you every dimension you need, organized by where the logo appears. Bookmark it, resize once, and stop guessing.

Recommended Logo Sizes

Here is the master reference table. Every placement, every size, one place.

A few things worth calling out. Header and footer logos are almost always horizontal wordmarks, so the 4:1 ratio fits most designs. Favicons and app icons must be square — if your logo is horizontal, use an icon-only version (the logomark without the wordmark). Social share images get the most pixel real estate because they appear large in feeds and message previews.

Need to hit these exact dimensions quickly? Pixotter's resize tool handles it in the browser — drop your logo, set the target size, download the result. No upload to a server, no account required.

Header Logo Sizes by Platform

Your header logo is the most visible placement on every page. The ideal size depends on your platform and theme, but the general range is 250×60 to 400×100 pixels for horizontal logos.

WordPress

WordPress header logo dimensions depend entirely on the active theme. Most modern themes use the Customizer's "Site Identity" panel and let you crop the image to fit.

• Default themes (Twenty Twenty-Four, Twenty Twenty-Five): Logo width typically renders at 200–300 px wide. Upload at 2x (400–600 px) for Retina sharpness.
• Popular themes (Astra, GeneratePress, Flavor): Usually allow custom max-width settings. A safe upload size is 400×100 px — the theme scales it down.
• Best practice: Upload SVG if your theme supports it (some require a plugin like Safe SVG). SVG renders crisply at any size.

Shopify

Shopify recommends a maximum of 250×250 px for the logo area across its themes. However, most themes render logos horizontally, so a 250×60 px or 300×80 px file works well.

• Dawn theme (default): Max logo width is 300 px. Upload at that width for the best result.
• SVG support: Shopify natively accepts SVG uploads for logos. Use SVG whenever possible.

Squarespace

Squarespace recommends logo images no wider than 400 px and no taller than 100 px for most templates. Higher-resolution files get scaled down by the browser, but uploading 2x (800×200 px) ensures Retina screens look sharp.

Custom Sites

If you control the CSS, match the logo to your design system's header height. A typical nav bar is 60–80 px tall, so a logo height of 40–60 px with horizontal padding looks right. Export at 2x for Retina: a 60 px display height means an 120 px source file.

SVG is strongly preferred for custom sites — it scales to any size, supports dark mode via CSS media queries, and weighs less than a comparable PNG at high resolution.

Favicon and App Icon Sizes

Favicons are the small square icons in browser tabs, bookmarks bars, and mobile home screens. Getting them right requires multiple sizes in multiple formats — it is one of the most tedious parts of web development.

Here is the minimum set you need in 2026:

Pack the 16×16, 32×32, and 48×48 sizes into a single .ico file and place it at /favicon.ico. Browsers check that path automatically — no HTML needed, though an explicit <link> tag is good practice.

For a deep dive on every favicon dimension, HTML snippets, and manifest.json setup, see the full favicon size guide. If you need to convert your logo from PNG to ICO format, the PNG to ICO conversion guide covers the process step by step. And for creating favicons from scratch, the how to make a favicon tutorial walks through the full workflow.

Social Media Logo and Profile Picture Sizes

When someone shares a link to your site, the image that appears comes from your Open Graph meta tags — not your header logo. This image should be 1200×630 px for optimal display across Facebook, LinkedIn, X (Twitter), Slack, iMessage, and Discord.

For your actual profile picture on social platforms, the requirements differ by platform but almost all use a square crop. A 400×400 px PNG covers most platforms comfortably — it gets scaled down as needed.

Profile pictures and cover images for every major social platform follow different rules. For the full breakdown of dimensions across Instagram, Facebook, X, LinkedIn, YouTube, TikTok, and Pinterest, see the social media image sizes guide.

Email Signature Logo Size

Email signature logos need to be small, lightweight, and compatible with every email client — including Outlook, which handles images differently from web browsers.

Recommended dimensions: 200×50 to 300×100 px for a horizontal logo. Keep the file under 30 KB.

Format: PNG or JPG. Do not use SVG in email signatures — most email clients will not render it. If your logo has transparency (text on no background), use PNG. Otherwise, JPG at 80% quality keeps the file small.

Retina considerations: Some guides suggest 2x images for Retina email clients. The tradeoff is file size — a 600×200 px logo at high quality easily exceeds 50 KB, which slows email rendering on mobile. For most cases, a sharp 300×100 px PNG is the right balance.

For a detailed guide covering email client quirks, HTML embedding, and format comparisons, read the full email signature image size guide.

File Format for Logos

Choosing the right format matters as much as choosing the right dimensions. Here is when to use each.

The rule of thumb: Use SVG everywhere you can. Fall back to PNG where SVG is not supported (email, social, favicons). Use ICO only for the /favicon.ico fallback file. Use JPG only if your logo sits on a photographic background.

For a deeper comparison between SVG and PNG — including performance benchmarks and browser support details — see the SVG vs PNG guide.

How to Resize Your Logo for Every Context

You have your source logo file. Now you need it in seven different sizes. Here is the fastest workflow.

Start with the highest resolution source you have. Ideally, this is an SVG or a PNG at 2000+ px wide. Scaling down preserves quality; scaling up does not.

Step 1 — Export your favicon versions. Take your logomark (the icon without the wordmark) and resize it to 512×512 px. From that, generate the 192×192, 180×180, 48×48, 32×32, and 16×16 versions.

Step 2 — Export your header logo. Resize the full horizontal logo to 400×100 px (or your theme's recommended width at 2x). Save as SVG if possible, PNG if not.

Step 3 — Export your social share image. Create a 1200×630 px canvas with your logo centered on a branded background color. This is your Open Graph image.

Step 4 — Export your email signature version. Resize to 300×100 px. Save as PNG. Compress to keep it under 30 KB.

Pixotter's resize tool handles all of these steps in the browser. Drop your logo, set the target dimensions, and download. No sign-up, no upload to external servers — the processing happens on your device. For related dimension guidance on other image types, the image size for website guide covers everything beyond logos.

FAQ

What is the standard logo size for a website header?

Most website headers use a logo between 250×60 and 400×100 pixels. The exact size depends on your theme or design system, but this range works across WordPress, Shopify, Squarespace, and custom builds. Upload at 2x resolution (double the display size) for Retina screens.

Should I use SVG or PNG for my website logo?

Use SVG whenever your platform supports it. SVG files scale to any size without quality loss, typically weigh less than PNG, and support dark mode via CSS. Use PNG as a fallback for platforms that do not render SVG — email clients, some social media uploads, and older CMS configurations.

What logo size do I need for Open Graph / social sharing?

The recommended Open Graph image size is 1200×630 pixels. This works across Facebook, LinkedIn, X (Twitter), Slack, Discord, and iMessage. Use PNG or JPG format — social platforms do not support SVG in meta tags.

How do I make my logo look sharp on Retina screens?

Export your logo at 2x the display size. If your header renders the logo at 200 px wide, upload a 400 px wide file. The browser scales it down, and Retina screens use the extra pixels for sharper rendering. SVG sidesteps this entirely — it is resolution-independent by nature.

What is the best file size for a website logo?

Keep header logos under 50 KB, footer logos under 30 KB, and email signature logos under 30 KB. SVG files are typically 5–20 KB for logo-complexity graphics. Larger files slow page loads, which hurts both user experience and search rankings.

Do I need different logo files for mobile and desktop?

Not usually. A single responsive logo (SVG or a well-sized PNG) works across both. The CSS handles scaling. However, some responsive designs swap the full horizontal logo for just the logomark on small screens — in that case, you need two files: the full wordmark and the standalone icon.

Can I use the same logo image for my favicon?

Only if your logo works at very small sizes. Most logos with text become unreadable at 32×32 or 16×16 pixels. Use a simplified version — typically just the logomark (icon without text) — for favicons and app icons. See the favicon size guide for the full breakdown.