What Size Should a Logo Be?
There is no single standard logo size. This guide explains how vector artwork, horizontal lockups and responsive website headers determine the right logo dimensions.
Contents
There is no universal standard size for a logo. A vector logo has no fixed size, because its paths can scale to any dimension without losing sharpness. The right size depends on where the logo appears. On a website, that means the header space at each screen width. In print, it means the physical area on the page or product. For horizontal lockups, the available height usually sets the size, and the width follows from the lockup's proportions.
What "logo size" actually refers to
The phrase can mean several different things, and mixing them up causes most sizing confusion. The first is the vector master, typically an SVG, AI, EPS or PDF file. Its artboard has nominal dimensions, but they matter only as a reference, because the artwork scales freely. The second is a raster export, such as a PNG, JPG or WebP. A raster file has fixed pixel dimensions and loses quality when enlarged beyond them. The third is the display size, meaning the space the logo occupies on a screen or page, regardless of the file behind it.
There is also a less obvious case. A file with a vector extension can contain an embedded raster image, or it can be nothing more than a raster preview wrapped in a vector container. That file will not scale cleanly. A filename or extension alone does not show whether a logo is built from editable vector paths. Open the file in a vector editor and inspect it in outline view to confirm that the shapes are real paths.
Why horizontal lockups need their own sizing logic
A horizontal lockup places the symbol beside the wordmark, so the whole arrangement is much wider than it is tall. Website headers and navigation bars usually limit height more than width, so a wide lockup is normally sized by its height. Once you set the height, the width follows from the aspect ratio. The wider the lockup, the more horizontal space it takes at any given height.
Two consequences follow from this. First, a horizontal lockup tends to look smaller than a stacked or symbol-only version at the same height. Its wordmark is set smaller relative to the overall height, so the letters may become hard to read before the symbol does. Second, two logos given the same pixel height can carry very different visual weight. If you need to place your logo next to partner logos, matching heights alone often looks uneven. Adjusting by eye for balanced visual weight usually works better than strict numeric equality. That last point is an editorial judgment, not a fixed rule.
How to size a logo for a website
No supplied evidence sets a standard pixel size for website logos. Website builders, CMS themes and templates each recommend their own dimensions, and those recommendations differ. The most reliable approach is to measure from your own layout rather than copy a generic figure.
- Find the logo container's dimensions in your theme or layout at each breakpoint you support. Check the theme documentation for its recommended or maximum logo dimensions.
- Set a maximum height for the logo inside that container and let the width scale proportionally. Do not set both dimensions independently.
- Use SVG where your platform supports it. One clean vector file stays sharp at every display size and pixel density.
- If you must use a raster format, export it larger than its display size to match high-density screens. A screen with a higher device pixel ratio needs proportionally more pixels to look crisp.
- Check the file weight. An SVG bloated with excess anchor points, hidden layers or embedded images can be heavier than necessary.
A common way to apply the height-first approach in CSS is to fix the height and let the width follow the artwork's proportions. The values below are placeholders to replace with measurements from your own layout.
.site-logo img,
.site-logo svg {
height: var(--logo-height);
width: auto;
max-width: 100%;
}
@media (max-width: var(--narrow-breakpoint)) {
.site-logo img,
.site-logo svg {
height: var(--logo-height-narrow);
}
}Standard CSS does not accept custom properties inside media query conditions, so a real stylesheet needs a literal breakpoint value there. The variables are used here only to show which values come from your layout rather than from a standard.
Responsive layouts: when one lockup is not enough
On narrow screens, a horizontal lockup sized to fit the width may become too short for the wordmark to stay legible. Many brands handle this with a responsive logo system. The full horizontal lockup appears on wide layouts, while a stacked version or the symbol alone appears where space is tight. The swap can be done in CSS or with responsive image markup, with each variant delivered as its own file.
For this to work, each variant needs defined rules. These include a minimum display size below which it should not appear, and clear space measured relative to the logo itself, such as the height of a particular letter or element. Relative clear space scales with the logo, while a fixed measurement does not. If your brand guidelines already define minimum sizes and clear space, follow those values. If they do not, the sizes need to be set and tested at real breakpoints. This guide does not supply them.
Preparing vector files so they size predictably
- Crop the artboard to the artwork, or to the artwork plus a consistent clear-space margin, so that setting a height in code sizes the logo itself, not stray empty space.
- Use the same artboard approach for every variant (horizontal, stacked, symbol) so they align consistently when swapped.
- Convert type to outlines in delivery files, or confirm that the font is licensed and available wherever the file will be edited. Keep a live-type master separately.
- Remove embedded raster images, hidden objects and unused swatches from web-bound SVGs.
- Provide raster exports at named sizes alongside the vector master for platforms that do not accept SVG.
A note on third-party logos
If you are resizing a logo you did not create, such as a client, partner or sponsor mark, being able to download the file does not mean you may alter it. Rights to modify the artwork, use its fonts, or display the trademark are separate questions. They are usually governed by the owner's brand guidelines or a licensing agreement. Many guidelines specify minimum sizes and forbid stretching, recoloring or rearranging lockups.
Gaps in the available evidence
No verified source was supplied for specific pixel or physical dimensions, platform-specific logo requirements, or measured legibility thresholds for horizontal lockups. Any figure you come across for a standard logo size should be checked against the documentation of the specific platform, theme or print vendor involved. Treat it as one recommendation for that context, not as an industry-wide standard.