Website Logo Sizes for Responsive Headers and Footers

The short answer: there is no universal standard logo size

There is no single industry-wide pixel dimension for a website logo. Figures that circulate as a "standard" usually come from a particular theme, template or platform, and they only apply inside that layout. What works across sites is a method. Size the logo by the height of the space it sits in, let the width follow the artwork's own proportions, and deliver it as vector artwork where the platform allows, so one file renders sharply at every display size. This article quotes no specific pixel values because no verified measurements or platform specifications were available. For exact slot dimensions, check the documentation for your theme, content management system or design system.

What "logo size" actually means on a web page

Discussions of logo size often mix up three different measurements. It helps to keep them separate, because which one matters depends on the file format you deliver.

Artwork proportions: the aspect ratio defined by the vector file's artboard or viewBox. This is fixed by the logo design and should never be distorted.
Display size: the space the layout gives the logo, measured in CSS pixels. This is the figure designers and developers usually mean by "logo size".
Export size: the actual pixel count of a raster file such as PNG, JPEG or WebP. This only matters for raster delivery, and it has to be larger than the display size to look sharp on high-density screens.

With true vector delivery, only the display size needs deciding, because the browser draws the paths at whatever resolution the screen needs. With raster delivery, you also have to export enough pixels to cover the display size multiplied by the device pixel ratio of the screens you support.

A header logo is limited mainly by height. The header bar has a set or minimum height, and the logo has to fit inside it with breathing room. The usual approach is to fix the logo's height and let its width scale automatically. The logo's shape changes the result considerably. At the same height, a wide horizontal wordmark takes up far more horizontal space than a square or stacked mark, which competes with navigation links and becomes a problem at narrow viewport widths.

Set the height and let the width follow (width: auto), rather than fixing both and risking distortion.
Respect the clear space defined in the brand guidelines. If none is defined, leave enough margin that the logo doesn't touch the header edges or the navigation.
Check the wordmark at the actual display height on real devices. Readable text matters more than hitting a particular number.
Where the header shrinks on scroll, test the logo at the smaller height too.

Responsive layouts: one logo or several versions

As the viewport narrows, simply scaling a wide horizontal logo down eventually makes its text too small to read. Many brands deal with this by switching to a different approved version at smaller widths, such as a stacked lockup or a standalone symbol. This is a design decision, and it depends on those versions existing in the logo package. Cropping or squeezing the main logo to fit is not an acceptable substitute.

The minimum legible size is the smallest display size at which the logo is still recognizable and any text in it is still readable. It is specific to each logo and has to be found by testing the actual artwork, not taken from a general rule. Fine details usually fail first: thin strokes, small taglines, tight letter spacing and narrow gaps between shapes. Taglines are commonly dropped from small-size versions for this reason. If the brand guidelines state a minimum size, follow it. If they don't, record the size you settle on so it can be applied consistently.

The footer logo usually plays a secondary role. It is often displayed smaller than the header logo or replaced with a simplified mark. Footer backgrounds are frequently dark or colored, so the footer may need a reversed or single-color version rather than the full-color logo. The same rules apply as in the header: size by height, keep the proportions, respect clear space, and don't go below the logo's minimum legible size.

Placement | Main constraint | Common version | Key check

Header, wide screens | Header height and space shared with navigation | Primary horizontal lockup | Wordmark readable at the set height

Header, narrow screens | Very limited horizontal space | Stacked lockup or standalone symbol, if approved | Recognizable at small size without distortion

Footer | Secondary visual weight and footer background color | Simplified, reversed or single-color version | Contrast against the background and minimum legible size

Vector and raster delivery for websites

SVG is the usual vector format for web logos. When an SVG contains real vector paths, it stays sharp at any display size and screen density, and one file can serve both header and footer at different sizes. A file extension alone doesn't prove this, though. An .svg file can simply wrap an embedded raster image, and then it behaves like a bitmap and blurs or pixelates when enlarged. To confirm the file contains editable paths, open it in a vector editor or inspect its code. Lettering in a logo SVG should normally be converted to outlines, so it doesn't depend on a font being installed or loaded. Include a viewBox so the browser knows the logo's proportions and can calculate the width from a set height.

If a platform only accepts raster uploads, export the logo from the vector master, not from an existing low-resolution preview. Make the export larger than the intended display size so it stays sharp on high-density screens. Use a format with transparency where the logo sits on varied backgrounds.

<!-- Breakpoint value is a placeholder; use your layout's own -->
<picture>
  <source media="(max-width: 40em)" srcset="logo-symbol.svg">
  <img class="site-logo" src="logo-horizontal.svg" alt="Company name">
</picture>

<!-- Raster fallback with a higher-density version -->
<img class="site-logo" src="logo-header.png"
     srcset="logo-header.png 1x, logo-header@2x.png 2x"
     alt="Company name">

/* Size by height; width follows the artwork's proportions */
.site-logo {
  height: var(--header-logo-height);
  width: auto;
  max-width: 100%;
}

.site-footer .site-logo {
  height: var(--footer-logo-height);
}

What this overview does not establish

No confirmed specifications, measurements or platform requirements were available for this article. It therefore gives no specific pixel dimensions for headers, footers, breakpoints or minimum sizes. Those values depend on your layout, your logo's proportions and detail, and any limits set by your website platform. Check the platform's documentation and the brand's own guidelines, and test the actual artwork on the devices your audience uses.