Website Logo Image Sizes: Recommended Dimensions and Formats

There is no universal pixel size for a website header logo. Choose dimensions from the logo’s aspect ratio, its rendered CSS box, available header space, and responsive breakpoints. Export a crisp source asset at a suitable density, then create separate favicon and manifest icons when those platforms require them.

1. Start with the rendered logo box

Measure the space the logo occupies in the page header rather than selecting a number first. A horizontal wordmark may need a wide, short asset; a badge or emblem may need a square or nearly square asset. Keep the source artwork large enough for high-density screens, but do not make the browser download a huge image when the displayed box is small.

Placement	Practical starting dimensions	Why it varies
Desktop horizontal header	400 × 100 px	Works as a 4:1 example for a rectangular wordmark; adjust to the actual header box.
Desktop square mark	100 × 100 px	Fits compact navigation and emblem-style branding.
Mobile horizontal header	160 × 40 px	Leaves room for navigation controls on narrow screens.
Mobile square mark	60 × 60 px	Useful when the header collapses to an icon.
Vertical logo	160 × 160 px	Suitable when the artwork is stacked rather than wide.

These are practical examples from Shopify’s website image guidance, not technical requirements. Its logo guide also gives 250 × 150, 350 × 75, and 400 × 100 px examples for different horizontal and vertical designs. Test the result at each breakpoint and keep the logo’s proportions unchanged.

Use CSS to control display size

<img src="/brand/logo.svg" width="200" height="50" alt="Acme home">

.logo {
  width: clamp(140px, 18vw, 220px);
  height: auto;
  display: block;
}

Set width and height attributes to reserve layout space and prevent cumulative layout shift. Use height: auto so the intrinsic aspect ratio is preserved. If the logo is decorative beside a separately labelled home link, use an empty alt; otherwise describe the destination, such as “Acme home.”

2. Choose a file format

Format	Best use	Trade-offs
SVG	Most website headers and responsive logos	Scales cleanly; sanitize uploaded SVGs and avoid unnecessary filters or embedded raster images.
PNG	Transparent raster fallback, legacy CMS fields, or complex artwork	Lossless but can be larger; export at sufficient density.
WebP	Raster logos where the CMS and browser targets support it	Small files; confirm transparency and upload support.
JPEG	Rarely appropriate for logos	No alpha transparency and compression can create halos around sharp edges.

There is no single format rule for every CMS, email client, or header. Prefer SVG when the publishing system permits it; otherwise use a transparent PNG or another supported raster format. Confirm the target platform’s upload rules before choosing.

3. Header logo versus favicon

A header logo and a favicon serve different surfaces. Do not apply favicon requirements to the header asset.

Google Search favicon requirements

Google Search Central says: “Your favicon must be a square (1:1 aspect ratio) that’s at least 8x8px.” Google recommends a size larger than 48 × 48 px for its search surfaces. Supported formats include BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF. The icon should represent the site, remain at a stable URL, and be crawlable along with the homepage. See Google’s favicon guidance.

<link rel="icon" href="/favicon.png" sizes="48x48" type="image/png">

Use a simple mark that remains recognizable at small sizes. A detailed wordmark usually fails when reduced to a favicon.

Web app manifest icons

For installed web apps, list the actual raster dimensions you provide. MDN’s manifest icon guidance allows sizes: "any" for scalable SVG icons; raster entries should state their real sizes.

{
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/icon.svg", "sizes": "any", "type": "image/svg+xml" }
  ]
}

Browsers and operating systems may select different entries, so provide the sizes your installation targets actually request.

4. Responsive logo strategy

1. Define the desktop and mobile header boxes in CSS.
2. Choose a horizontal wordmark, square mark, or both based on available width.
3. Use an SVG with a viewBox when possible.
4. Switch to a compact mark at a breakpoint if the full wordmark collides with navigation.
5. Check light and dark backgrounds, zoom, high-density displays, and localization.

<picture>
  <source media="(max-width: 600px)" srcset="/brand/mark.svg">
  <img src="/brand/wordmark.svg" width="220" height="55" alt="Acme home">
</picture>

5. Accessibility and image metadata

Write alt text that communicates the link’s purpose. “Acme home” is useful for a linked logo; “logo” alone is not. Google recommends descriptive alt text and cautions against using a generic site logo as the primary image in image metadata. That image SEO guidance applies to page imagery, not as a replacement for favicon or manifest rules.

6. Validate the asset before publishing

• Confirm the intrinsic aspect ratio matches the artwork.
• Inspect SVGs for a correct viewBox, missing fills, and unsafe embedded content.
• Check transparent edges against both light and dark backgrounds.
• Verify the CSS box at desktop, tablet, and mobile widths.
• Confirm favicon and manifest URLs are stable and publicly crawlable.
• Measure file size; remove editor metadata and unused SVG definitions.
• Test keyboard focus, alt text, and the home-link accessible name.

7. Inspect every breakpoint with a screenshot

A screenshot makes overflow, blurry raster exports, and poor contrast visible at the actual rendered size. You can capture your own page with a browser automation tool, or use ScreenshotNeo to request a clean image of each responsive state.

Or skip the browser setup

ScreenshotNeo accepts one GET request and returns PNG, JPEG, WebP, or PDF. The API can use any viewport, device preset, retina scale, custom CSS, JavaScript, waits, cookies, headers, and element selectors. See the ScreenshotNeo API docs.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o logo-check.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("logo-check.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

8. Troubleshooting

Problem	Likely cause	Fix
Logo looks blurry	Small raster stretched larger	Use SVG or export a raster at the displayed size multiplied by the device scale.
Logo is squashed	Both dimensions forced in CSS	Set one dimension to auto and preserve the aspect ratio.
Header jumps while loading	No intrinsic dimensions	Add width and height attributes.
Favicon absent in Search	Not square, blocked, unstable, or not recrawled	Use a square crawlable file at a stable URL and follow Google’s requirements.
Manifest icon ignored	Declared size does not match the file	Set the real raster size and MIME type; use any only for SVG.
Screenshot includes a popup	Consent or chat overlay loaded first	Use ScreenshotNeo’s clean capture or wait for and hide the selector.

9. Performance, reliability, and cost

Keep the header asset small because it appears on many pages. SVG usually avoids multiple raster downloads; responsive raster variants should be served only when needed. Reserve layout space, preload only a critical logo when measurement supports it, and cache immutable assets with a fingerprinted filename.

For automated visual checks, capture representative desktop and mobile viewports instead of every possible width. Cache unchanged pages with a suitable TTL. ScreenshotNeo reports whether a response was billed, so failed loads and cache hits do not consume paid shots; bulk capture supports up to 100 URLs per call, and async jobs can notify a signed webhook.

10. FAQ

What is the best logo size for a website?

Use the rendered header box and the logo’s aspect ratio. 400 × 100 px is a practical rectangular starting point, not a universal rule.

Should a website logo be PNG or SVG?

Use SVG when your CMS and security policy allow it. Choose a transparent PNG or supported WebP when a raster upload is required.

Can I use the header logo as the favicon?

Only if it remains recognizable as a square icon. A separate simplified mark usually works better.

Does a larger logo improve SEO?

Pixel dimensions alone do not. Crawlability, stable URLs, correct markup, performance, and useful alt text matter for their respective surfaces.

Do mobile and desktop need different logo files?

They can share one responsive SVG, but a compact mark or alternate export is useful when the desktop wordmark cannot fit.