Website Logo Sizes for Responsive Layouts
How to size a website logo for responsive layouts: why no single standard exists, how SVG scaling works, finding minimum legible sizes and exporting raster fallbacks.
Contents
The short answer
No single standard pixel size applies to every website logo. The right size depends on the layout around it: the header height, the space next to the navigation and the narrowest screen the site must fit. It also depends on the smallest size at which the logo stays legible. The most dependable approach is to supply the logo as an SVG with clean vector artwork, size it in CSS relative to its container, and test it at the smallest widths you support. If you need a raster file, export it at multiples of the size it will actually display at, not at a generic dimension.
Why one logo needs several sizes
On a responsive site, the logo can display at different dimensions at different breakpoints. Two measurements matter, and they are easy to confuse. The display size is set in CSS pixels, which is a layout unit. The file resolution is counted in device pixels. On high-density screens, one CSS pixel maps to more than one physical pixel; this ratio is called the device pixel ratio. A raster logo that looks sharp on a standard display can look soft on a high-density screen unless the file contains more pixels than its CSS dimensions.
How vector artwork changes the sizing question
An SVG describes shapes mathematically, so the browser renders it sharply at whatever size the layout requests. One file can therefore cover every breakpoint and pixel density. The viewBox attribute defines the artwork's coordinate system and aspect ratio. CSS then controls the rendered size. If you set one dimension and leave the other on auto, the logo keeps its proportions.
The .svg extension alone does not prove that a file contains vector paths. An SVG can wrap an embedded PNG or JPEG, and that image scales like any bitmap. To check, open the file in a vector editor and confirm that the shapes select as editable paths. Alternatively, open it in a text editor and look for embedded image data. Live text inside an SVG depends on the font being available; if it is missing, the browser substitutes another font. For the web version, converting text to outlines avoids this, but keep a separate editable master with live type for future changes.
Before delivery, clean up the web SVG. Remove hidden layers, unused definitions and editor metadata. This keeps the file small and predictable when it is styled or inlined.
Finding the minimum legible size
The minimum size is the smallest size at which every essential element of the logo stays readable and recognizable. You find it by testing the specific artwork; there is no universal number. Thin strokes, tight letter spacing, small counters, taglines and detailed symbols usually fail first.
- Check the brand guidelines first. If the identity system specifies a minimum digital size, that requirement takes precedence.
- Render the logo at its smallest planned display size on real devices, including both standard and high-density screens.
- Confirm that the smallest text element, often a tagline or trademark symbol, can be read without zooming.
- Look for fine strokes and narrow gaps that fill in or disappear, especially in light-on-dark versions.
- Test against every background the header uses, including sticky or scrolled states.
- If the logo links to the home page, add padding so the clickable area is larger than the visible artwork.
If the full logo fails at the largest size the narrowest layout allows, shrinking it further will not help. Switch to a simpler lockup instead.
Using alternate lockups across breakpoints
A responsive logo system usually includes several versions. A typical set is a full horizontal lockup with tagline for wide layouts, a horizontal version without the tagline, a stacked version, and a symbol or monogram for the narrowest screens. Each version needs its own minimum-size test. Deliver each one as a separate artboard or file with consistent naming so developers can map versions to breakpoints without guessing.
Developers can switch versions with the picture element and media conditions, or by showing and hiding versions in CSS. Whichever version appears, its accessible name should stay the same, normally the organization's name.
<!-- Vector logo with a symbol-only version for narrow screens -->
<picture>
<source media="(max-width: BREAKPOINT)" srcset="logo-symbol.svg">
<img class="site-logo" src="logo-horizontal.svg" alt="Organization name">
</picture>
<!-- Raster fallback with density descriptors -->
<img class="site-logo" src="logo.png"
srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
alt="Organization name">
.site-logo {
height: var(--logo-height); /* set per breakpoint from your layout */
width: auto;
}In the snippet, BREAKPOINT and the --logo-height value are placeholders. Replace them with values from your own layout.
Sizing raster fallbacks
Some platforms do not accept SVG uploads, so a PNG or WebP file is sometimes required. In that case, start from the displayed CSS size. Export a 1x file at that size, a 2x file at double that size, and optionally a 3x file for very high-density screens. For example, if the logo displays at a given width W, the 2x file should be 2W pixels wide. Export every file from the vector master rather than upscaling an existing bitmap, which cannot add detail. Use PNG or WebP when the logo needs a transparent background, because JPEG does not support transparency.
| Asset | What determines its size | Notes |
| SVG header logo | CSS dimensions set by the layout | One file covers all pixel densities, provided it contains true vector paths |
| Raster fallback | Displayed CSS size multiplied by the device pixel ratio | Export 1x, 2x and optionally 3x from the vector master |
| Symbol-only lockup | Narrowest breakpoint and the mark's minimum legible size | Needs its own legibility test |
| Favicon and app icons | Platform-specific requirements | Separate assets, not covered here; check current platform documentation |
Resizing a logo you did not create
Being able to download a logo does not mean you have permission to modify it. Resizing below a stated minimum, cropping to a symbol-only version, recoloring or retyping the wordmark can all conflict with the owner's brand terms, font licenses or trademark rights. Before creating responsive variants of a client, partner or third-party logo, check the owner's guidelines or get approval.
Gaps to fill from your own project
This article does not give specific pixel dimensions, header heights or numeric minimum sizes. No measured data or test results were supplied for it, and no formal standard defines these numbers. Get specific figures from the brand guidelines, the site's design system and testing on target devices. Upload limits and recommended dimensions in content management systems and site builders vary by platform and theme, so check their current documentation.