Logo size for a website header: the real numbers
A website header logo typically renders 120 to 200 pixels wide, with a height near 40 to 60 pixels inside a navigation bar of 60 to 80 pixels. Upload an SVG, or a PNG exported at twice its display size, and set the rendered size in the builder, not by resizing the file.
Checked August 2026. The Shopify figures come from the Dawn theme's published settings source; the rendered ranges are the convention across current builder defaults.
What those numbers look like, at true size
These two bars render at real pixel dimensions in your browser right now. The first is the common compact pattern, the second the roomier marketing-site pattern, and the same pair again on dark:
Notice what the logo is doing in every bar: sharing a confined horizontal strip with navigation links and a button. That geometry is why horizontal lockups, a compact mark beside the name, win headers, and why stacked or emblem-style logos fight the space. If your logo only exists as a tall arrangement, the header wants a horizontal variant of it.
Per-builder settings
| Builder | Where the size is set | What to upload |
|---|---|---|
| Any builder (the rule) | Rendered 120 to 200px wide, 40 to 60px tall | SVG, or transparent PNG at 2x the display size |
| Shopify (Dawn theme) | Logo width setting: 50 to 300px range, 100px default; raise it to 120 to 200px to taste | Dawn scales the height automatically from your file's proportions |
| Webflow | Set the image element's height to 40 to 60px inside the navbar and let width follow | Upload the SVG directly to the asset panel |
| Framer | Set the logo layer's height to 40 to 60px; pin it to the left of the nav frame | Framer accepts SVG graphics natively |
| WordPress | Most themes expose a logo or site-icon slot in the customizer; the theme's CSS sets the rendered size | Upload SVG where the theme allows it, otherwise a 2x PNG |
| Next.js / hand-coded | Explicit height on the img or Image element, 40 to 60px, width auto | Serve the SVG file itself; no srcset needed |
/* The whole technique, hand-coded version */ <header style="height:72px"> <img src="/logo.svg" alt="Acme" style="height:44px; width:auto" /> </header>
The pattern behind every row is the same: the container sets the rendered size, the file only sets the sharpness. Which is why the one real decision is the file itself, and the tradeoff is shown live in the SVG vs PNG zoom test.
The retina rule, in one paragraph
High-density screens paint four or more physical pixels per CSS pixel. A PNG exported at exactly 160x44 therefore gets stretched to 320x88 physical pixels on a retina display, and the stretching is the blur people cannot place. The fix is mechanical: export raster logos at twice their display size, so the 160x44 slot gets a 320x88 file. Or skip the arithmetic permanently by using SVG, which has no native size to stretch. To see your own file in a header slot, on light and dark, before it goes live, the free logo size checker renders exactly this surface.
What the LogoRay kit ships for the header
Every LogoRay kit includes the horizontal lockup as SVG in light and dark versions, the exact two files the bars above call for, plus transparent PNGs at 2048 and 1024 pixels for platforms that restrict SVG uploads. Drop the SVG into any row of the table and the retina question never comes up again.
Common questions
What size should a logo be in a website header?
Plan for a rendered width of 120 to 200 pixels and a height near 40 to 60 pixels, inside a navigation bar that is typically 60 to 80 pixels tall. Wordmark-only logos sit at the wide end, square marks at the narrow end. Upload an SVG, or a PNG exported at twice those dimensions so it stays sharp on high-density screens.
Why does my header logo look blurry?
Almost always because a PNG was exported at exactly its display size and the screen is high-density: a retina display paints four physical pixels for every CSS pixel, so a 160px-wide export gets stretched to 320 physical pixels. Export the PNG at twice its display size, or use an SVG and the question disappears.
Should the header logo be SVG or PNG?
SVG whenever the builder accepts it, which Webflow, Framer, WordPress and every hand-coded stack do. It is sharp at every density, weighs a few kilobytes, and never needs re-exporting. Keep a 2x transparent PNG as the fallback for platforms that restrict SVG uploads.
How big should the logo be on mobile?
Smaller than desktop: mobile header bars run around 48 to 64 pixels tall, so the logo renders near 32 to 40 pixels high. That is close to favicon territory, which is why a horizontal lockup with a compact mark survives mobile better than a wide, detailed wordmark. Check the logo at 32 pixels before committing.
Does a bigger logo file make the header logo bigger?
No. The header's CSS or the builder's logo-width setting decides the rendered size; the file only decides how sharp that rendering is. Uploading a 4000px PNG into a 140px slot changes nothing visually except download weight. Size the container in the builder, and give it a file at 2x that size or an SVG.
Compose a horizontal lockup from hand-curated marks and own the light and dark SVGs plus every PNG export. Free to design, $39 once for the files.