Recommended Website Logo Sizes for Responsive Layouts
There is no single standard website logo size. Learn how layout, screen density, file format and minimum legible size determine how big your logo should be.
Contents
There is no single "normal" logo size for a website. No universal pixel standard applies across sites, and the material behind this article does not establish recommended dimensions. In practice, the right size depends on three things: the space your layout gives the logo, the smallest size at which the artwork stays legible, and the file format you deliver. For a responsive site, the most dependable approach is to supply the logo as clean vector artwork, usually SVG, and let the layout set the display size at each breakpoint.
What Is Actually Being Sized
Two things often get mixed up. The first is the logo artwork, meaning the file itself. The second is the box the logo occupies on the page. A vector logo has no fixed pixel size, because its shapes are defined mathematically and redraw cleanly at any scale. A raster logo, such as a PNG or JPG, is a fixed grid of pixels. It looks soft or blurry when it is displayed larger than that grid, and it wastes bandwidth when it is much larger than needed.
When people ask for a recommended logo size, they usually mean the display size: how tall or wide the logo should appear in the header, footer or mobile menu. A layout decides that. The file format does not.
Why Responsive Layouts Change the Question
On a responsive site, the logo's container changes with the screen. A wide desktop header may have room for a full horizontal lockup. A narrow mobile header may only fit a compact mark beside a menu button. So a responsive site has no single correct size. The goal is a logo that reads well inside each container the layout produces.
Many brands handle this with a set of responsive logo variants. Common examples are a full lockup with symbol and wordmark, a stacked version, a wordmark alone, and a symbol alone. The site switches between variants as space shrinks, so it never squeezes one detailed lockup until it becomes unreadable.
Minimum Legible Dimensions
The minimum legible size is the smallest size at which every essential part of the logo stays clear. The smallest detail sets that limit, not the overall outline. The details that usually fail first are:
- Taglines and small secondary text
- Thin strokes and hairline details
- The enclosed spaces inside letters, such as in e, a and o
- Tight gaps between letters or between the symbol and the wordmark
- Fine gradients or textures that blur into flat color
If your brand guidelines state a minimum size, follow them. If they do not, test the logo at decreasing sizes on real devices and note where any element stops reading clearly. That point is your practical minimum for that variant. Below it, switch to a simpler variant instead of shrinking further. The supplied evidence includes no specific minimum figures, so any number should come from your own guidelines or testing.
Choosing a File Format for the Web
| Format | Type | How it behaves when resized | Typical web role |
| SVG | Vector (if built from paths) | Stays sharp at any display size | Primary logo for headers and responsive layouts |
| PNG | Raster | Sharp up to its pixel dimensions, then softens | Fallback or contexts that need a fixed bitmap |
| JPG | Raster | Like PNG, but with no transparency and with compression artifacts | Rarely suitable for logos |
If you must use a raster file, export it larger than its displayed size. High-density screens show more physical pixels per layout pixel, so an image exported at exactly its display size can look soft on those screens. Exporting at a multiple of the display size, or providing several resolutions, avoids this. An SVG made of vector paths sidesteps the issue entirely.
Confirming an SVG Is Really Vector
An .svg extension does not guarantee scalable artwork. An SVG can wrap an embedded raster image, and that image will blur when enlarged just like a PNG would. Open the file in a vector editor and check that the logo is made of editable paths and shapes, not a single placed image. If the text is still live type, it may depend on fonts the visitor does not have. Converting text to outlines for the delivered web file avoids that. Keep an editable master with live type separately.
A Practical Sizing Workflow
- Decide the logo's container size at each breakpoint as part of the layout design.
- Choose which logo variant fits each container.
- Find each variant's minimum legible size by testing on real screens.
- Deliver each variant as a path-based SVG, cropped tightly to the artwork with consistent clear space.
- Add raster fallbacks only where needed, exported above display size for high-density screens.
- Set the display size in CSS rather than baking it into the file.
A Simple CSS Pattern
This example lets an SVG logo scale with its container while keeping its proportions. The values are placeholders. Replace them with the sizes your layout and legibility testing call for.
.site-logo img {
display: block;
height: auto;
max-width: 100%;
width: var(--logo-width);
}
@media (max-width: 600px) {
.site-logo img {
width: var(--logo-width-mobile);
}
}For the SVG to scale cleanly, it needs a viewBox attribute that matches the artwork's bounds. A missing or loose viewBox can leave unexpected empty space around the logo or make it render at the wrong proportions.
What the Evidence Does Not Settle
The material behind this article contains no confirmed pixel dimensions, platform specifications or measured legibility thresholds. Pixel sizes you see quoted elsewhere are conventions or the requirements of specific themes and platforms, not universal rules. Check the documentation of the theme, site builder or platform you use, since many define their own logo slot sizes. Treat your brand guidelines and on-device testing as the final authority on minimum size.