Website Header Logo Size: Resize Your Logo for Desktop, Mobile and Retina

How big should a header logo be?

Header logos are best sized by height, because the header’s height is what you are designing around. These are common ranges we use for small-business sites:

Very wide logos (6:1 and wider) become thin at these heights. On mobile, a 6:1 logo at 40 px tall is 240 px wide and can collide with the menu button — consider a shorter lockup or the icon plus a shortened name.

The 2× rule for sharp logos

Phones and most modern laptops use high-density screens with 2 or 3 physical pixels per CSS pixel. A logo displayed at 200 × 60 CSS px is drawn with 400 × 120 or 600 × 180 physical pixels. If the file is only 200 × 60, it is enlarged and looks soft — the most common reason clients tell us their logo “looks blurry on my phone”.

Export at 2× and tell the browser the display size. 3× is rarely worth it for logos; the difference is hard to see and the file is heavier. An SVG is sharp at every density automatically — see PNG vs SVG for websites.

Trim the padding before exporting

Many logo files include a wide transparent border — sometimes because they were exported from an artboard. When the theme sets the logo to 60 px tall, that 60 px includes the empty border, so the actual artwork may be only 40 px tall. Trim the canvas close to the artwork (a few pixels of margin is fine) and add spacing with CSS instead. The Logo Resizer lets you set padding to 0 and an exact canvas.

HTML that keeps the header fast and stable

<a href="/" class="site-logo" aria-label="Brightside Bakery home">
  <img src="/img/logo-400x120.png" width="200" height="60" alt="Brightside Bakery">
</a>

• width/height reserve the space before the image loads, preventing layout shift (a Core Web Vitals metric).
• No loading="lazy" on the header logo — it is visible immediately.
• CSS for responsive sizing: .site-logo img { height: 60px; width: auto; } on desktop and height: 40px in a mobile media query. Because the file is 2×, both sizes stay sharp.
• Alt text: the business name (or “Brightside Bakery home” on the link). No keyword stuffing.

Transparent and sticky headers

Transparent headers sit on top of a hero image or video. Your normal dark logo may disappear on a dark photo, so themes often allow a second logo for the transparent state — upload a white version. If the hero image changes (sliders, different pages), test the logo on each.

Sticky headers shrink after scrolling. Scaling the same 2× file down with CSS is fine; just check the shrunken logo is still legible — around 32 px tall is the practical minimum for a wordmark.

Platform settings

WordPress

In classic themes: Appearance → Customize → Site Identity → Logo. WordPress shows a crop dialog — choose Skip cropping if your file is already trimmed and proportioned. Many themes add a “logo width/height” control in the header settings. In block themes: edit the header template part in the Site Editor and select the Site Logo block, which has a width setting. Uploading an SVG requires a sanitising plugin (see the SVG guide).

Squarespace

Upload the logo in the site header editor (Edit → header → Site title & logo), then adjust the logo height slider for desktop and mobile separately. Squarespace scales by height, so a file with transparent padding looks small — trim it first.

Wix

Add the logo as an image element in the header and resize it on the canvas; switch to the mobile editor to set a separate size. Upload a 2× PNG or an SVG (Wix supports SVG uploads as vector art).

Shopify

Covered in detail in our Shopify logo guide: upload at 2× the logo-width setting.

Checklist

• Logo trimmed, exported as SVG or 2× PNG/WebP, under ~30 KB.
• Display height set for desktop (50–70 px typical) and mobile (32–48 px).
• width and height attributes in the HTML; no lazy loading.
• White version ready for transparent/dark headers and the footer.
• Checked on a real phone: legible, not crowding the menu.
• A matching favicon installed.