Logo Sizes for Websites and Responsive Horizontal Lockups

The short answer: there is no single ideal logo size for a website

No fixed pixel dimension is correct for every site. The right size depends on the height of your header or navigation bar, the shape of the logo, and the width of the screen it appears on. The more useful question is which logo version and file type you deliver, and how the layout resizes it. For most websites, a vector logo exported as SVG and sized by height within the header is the most dependable approach. A horizontal lockup can be paired with a more compact version for narrow screens.

The material for this article included no confirmed specifications, such as platform-required dimensions, theme or CMS upload limits, or measured performance figures. This article therefore gives no specific pixel sizes. Check your site builder, theme or design system for its actual header dimensions before you finalize artwork.

What is being sized: the logo, the lockup and the file

Three things are easy to confuse when people ask about logo size:

• The logo artwork: the master design, ideally built as vector paths in an editable source file.
• The lockup: a fixed arrangement of the symbol and wordmark, such as horizontal (symbol beside the name), stacked (symbol above the name) or symbol only.
• The delivered web file: the exported asset the website loads, commonly SVG for vector or PNG/WebP for raster.

The display size on a web page is set by the layout, usually through CSS or a theme setting, not by the artwork. A vector file has no fixed pixel size. A raster file has fixed pixel dimensions, which cap how sharply it can display.

Why horizontal lockups need special handling

Most website headers are wide and short, so a horizontal lockup usually fits a desktop header well. The trade-off is that a wide logo's height is limited by its width. On a narrow phone screen, a long horizontal lockup must either shrink until the wordmark is hard to read or compete with the menu button for space.

A responsive logo system addresses this by switching versions instead of only scaling one version down:

• Wide screens: the full horizontal lockup.
• Medium or constrained headers: a simplified horizontal version, for example with a tagline removed.
• Narrow screens or very small spaces: a stacked lockup or the symbol alone, if the symbol is recognizable without the name.

Where each switch happens is a design decision. The usual test is the point where the wordmark stops being comfortably legible or the header becomes crowded. Small sizes such as browser tab icons generally need a symbol-only mark rather than any lockup.

Sizing by height rather than width

Horizontal lockups vary widely in proportion. Setting a target height and letting the width follow keeps different logo versions visually consistent within the header. It also keeps the logo from overflowing when the lockup is unusually long. A minimal pattern looks like this, with the height value set to suit your own header:

.site-logo {
  height: var(--logo-height); /* set to fit your header */
  width: auto;                /* preserve the lockup's proportions */
}

For SVG files, check that the artboard or viewBox is cropped tightly to the artwork. Excess empty space around the logo makes it display smaller than intended and is a common reason a logo looks undersized in a header.

Vector artwork, embedded raster images and raster previews

The file type affects how sharp a logo can look on a website:

• True vector artwork, built from paths and shapes, scales to any display size and pixel density without losing sharpness.
• An embedded raster image is a bitmap placed inside a vector-format container such as an SVG, PDF or EPS. It keeps the bitmap's resolution limits even though the file extension suggests vector.
• A raster preview is a thumbnail or flattened image of a logo. It shows what the logo looks like but cannot be enlarged cleanly or edited as artwork.

A file extension alone does not confirm editable vector paths. To verify, open the file in a vector editor and check whether the logo is made of selectable paths, or check the outline view. If you must use a raster file on the web, export it at a higher pixel size than its displayed size, scaled for the device pixel ratios you intend to support, so it stays crisp on high-density screens.

Permissions when downloading a logo

Being able to download a logo file does not mean you may resize, redraw or rearrange it into new lockups, or use it on your site. Logos are often trademarks with usage guidelines. Fonts in a wordmark may have their own license terms. If you are preparing responsive versions of a logo you don't own, check the brand guidelines or get permission. Many brands supply approved horizontal, stacked and symbol-only versions for this purpose.

Practical checklist

• Confirm your header's actual height and available width in your theme or site builder.
• Prepare the logo as true vector artwork and export SVG for web use.
• Create or obtain horizontal, stacked and symbol-only versions.
• Size the logo by height and let width follow proportionally.
• Crop the SVG artboard tightly to the artwork.
• Test legibility at your narrowest supported screen width and switch versions where the wordmark stops reading clearly.
• Verify you have the right to modify and use the logo, its fonts and its trademark.