Website logo: sizes, formats and placements to plan

A website logo is not just a file dropped in the top left corner of a page. It is a small system of versions, formats and placements that must stay legible in a header, a mobile menu, a favicon, a footer, a checkout page, transactional emails and sometimes an app-like dashboard. Many brands prepare a beautiful main logo, then discover during integration that it is too wide, too thin, too heavy or impossible to recognize at small sizes.

The useful question is not “what is the one correct export size?” It is “which web uses must this logo cover without losing sharpness, speed or consistency?” Modern web standards favor adaptive images, high-density screens and layouts that change with available width. A serious logo has to follow that responsive logic instead of being treated as a fixed picture.

For this guide, we reviewed current technical sources: MDN documentation on responsive images and page metadata, Google Search guidance about favicons, and common performance practices for brand assets. The goal is to translate those constraints into a practical checklist for a small business, freelancer or marketing team preparing a new identity.

1. Think system, not single file

A website exposes the logo in very different contexts. On the homepage it may sit next to a full navigation menu. On mobile it often lives inside a narrow bar. In the browser tab it becomes a tiny favicon. In an email it has to survive mail-client constraints. In a customer dashboard it may sit next to icons, badges and interface states. One export cannot answer all those situations cleanly.

Start by defining a family of versions: main horizontal logo, compact version, symbol or monogram if the brand has one, light version, dark version, square favicon and raster fallbacks. This connects directly with our guide to the responsive logo: as channels multiply, identity needs controlled variants rather than improvised resizing by a developer at the end of the project.

A good system also defines clear space. The logo should not touch the header edge or collide with menu items. Even when small, it needs breathing room. This may sound purely aesthetic, but it improves recognition because a logo surrounded by too many links, buttons and icons becomes one more piece of visual noise.

2. Header: instant recognition

The header is usually the most visible placement. In many interfaces, the logo acts as both brand anchor and home link. It must be recognized in a fraction of a second. For a horizontal logo, width matters: too large and it crushes navigation; too small and typography becomes fragile. Many websites benefit from a slightly simplified header version, especially when the brand name is long.

Header height matters as much as file width. A tall logo can force a heavy bar and reduce useful space above the fold. A very flat wordmark can become hard to read on mobile. The answer is often to prepare two compositions: a complete version for desktop and a compact version for restricted widths.

Contrast is decisive. If the header becomes transparent over a hero image, the logo needs a light version and a dark version. Do not rely on an automatic shadow or a rough CSS filter to save legibility. A reliable website logo is designed for the actual backgrounds of the site, with color combinations validated before production.

3. Mobile: short version and tight space

On mobile, the logo shares space with a burger menu, sometimes a call button, language switcher or login action. Space is scarce. A detailed identity with tagline or complex symbol quickly loses impact. A short version should be planned: initials, symbol, tightened wordmark or variant without baseline.

Also think about sticky header behavior. When the bar remains visible during scroll, the logo should be discreet enough not to steal attention from the content, but identifiable enough to reassure users. Too much height reduces reading space. Too little presence makes the brand anonymous. Real-phone testing is essential because a resized desktop preview does not always reproduce mobile density.

Mobile reveals drawing weaknesses. Very thin strokes, letters placed too close together or a pictogram full of small details can disappear. If the logo was designed only for a large presentation mockup, a simplification is needed. That is not a betrayal of the identity; it is a necessary adaptation to usage.

4. Favicon and shortcut icon

The favicon is the website’s smallest brand ambassador. It appears in browser tabs, bookmarks, some search contexts and sometimes saved shortcuts. Google recommends a square icon and multiples of 48 pixels for search usage. MDN also shows why different icons can be useful for Apple devices and shortcut contexts. In practice, a favicon should be designed separately from the main logo.

A full wordmark rarely works as a favicon. At 16 or 32 pixels, letters become unreadable. Choose a simple sign, a redrawn initial, a distinctive shape or an extremely simplified symbol. The classic mistake is to shrink the full logo into a square: it may be technically sharp, but visually meaningless.

Test the favicon on light backgrounds, dark backgrounds and crowded browser tabs. It does not need to tell the full brand story; it needs to create a stable marker. If your identity has no element that works small, that is useful feedback for the brief: an icon-like variant may be missing.

5. SVG, PNG, WebP: what to deliver

For the web, SVG is usually the priority format for a vector logo. It stays sharp on every screen, can be lightweight and integrates well into a modern interface. But the SVG must be clean: no useless layers, no unconverted text, no excessive metadata, no effects that render unpredictably. A badly exported vector file can be heavier or more fragile than a PNG.

PNG files are still necessary. They serve emails, partner platforms, shared documents and cases where SVG is not accepted. Prepare transparent PNGs at several useful sizes, ideally with 2x versions for high-density screens. WebP can be excellent for images, but it is not always the best brand-logo handoff format when the asset must travel outside the site.

The important part is to deliver a coherent kit, as explained in our guide to the logo delivery kit. A client should not receive fifteen randomly named files. They should know which version belongs in the header, favicon, dark background, email and social profile. File names, sizes and usage rules are part of design quality.

6. Retina, weight and performance

High-density screens make raster logos look blurry when exports are too small. A PNG displayed at 160 pixels wide may need a 320-pixel source or more, depending on context. Responsive images use mechanisms such as srcset and sizes, documented by MDN, to help the browser choose the right source. Even if logos are often simpler than photos, the logic is similar: provide a sharp source without wasting bandwidth.

Performance matters. A logo at the top of a page loads early. If it is heavy, it hurts perceived speed. A clean SVG or optimized PNG makes a real difference. Avoid giant multi-megabyte exports for an asset shown small. Also avoid complicated background-image setups when a simple img element or inline SVG is enough.

The right balance is to prepare few files, but choose them well: primary vector, optimized raster variants, favicon and shortcut icons. Sharpness must be visible, but users should not pay for that sharpness with unnecessary loading time.

7. Footer, dark backgrounds and variants

The footer is often darker, denser and less prominent than the header. The logo works there as a signature. It can be smaller, monochrome or inverted as long as it remains consistent with the brand. If the site uses a navy, dark gray or black footer, plan a validated light version instead of dropping the colored logo without control.

Special pages also impose variants: checkout, customer account, advertising landing page, error page, documentation and confirmation emails. Each may have width and color constraints. A prepared brand saves time because nobody has to reinvent the logo for every integration.

Placements should stay consistent. If the logo changes size, margin or contrast on every page, the brand feels unstable. Consistency does not prevent adaptation; it defines the limits within which adaptation remains recognizable.

8. Brief checklist

Before requesting or approving a website logo, list real placements: desktop header, mobile header, footer, favicon, mobile shortcut, email, checkout page, customer account, social profiles and PDF documents. For each placement, note the background, approximate size and main constraint. This simple map prevents many rounds of revision.

Then request formats: clean vector SVG, transparent PNG in several sizes, light version, dark version, square favicon and possibly symbol-only version. Also define forbidden uses: no stretching, no uncontrolled recoloring, no insufficient contrast, no tagline below a minimum size.

Wilogo can help clarify that brief from the beginning. The more explicit your web constraints are, the easier it is to compare logo directions. A successful identity is not only attractive in a mockup; it works in the real places where visitors see it.

Need a logo ready for your website?

Describe your channels, backgrounds, header constraints and favicon needs. Wilogo turns that brief into logo directions designed for real web usage.

Create your logo brief on Wilogo

9. Useful sources

Sources reviewed: MDN on responsive images in HTML, MDN on metadata and favicons, plus Google Search documentation about favicons in search results.

FAQ

What size should a website logo be?

There is no single perfect size. Plan a vector SVG where possible, 2x or 3x PNG fallbacks, a square favicon and a simplified small-space version. The identity must remain clear from tiny browser icons to large desktop headers.

Is SVG always the best logo format for a website?

For a vector logo, SVG is usually the best web format because it stays sharp and can be lightweight. Keep PNG fallbacks for emails, third-party tools and channels that do not accept SVG.

Should the header and footer use the same logo?

Not always. The header needs immediate recognition, while the footer can use a quieter or inverted version. What matters is consistent identity, contrast and clear usage rules.

How do I test a logo before launch?

Check it on mobile, desktop, light backgrounds, dark backgrounds, favicon size, sticky menus, Retina screens and slow connections. If it fails in a key context, create a specific variant.