There is no single required pixel size for a website logo. Choose dimensions from the logo’s aspect ratio, the space reserved in your header or footer, and the size at which it will actually render. As practical starting points, Shopify’s 2026 guidance shows 400 × 100 px for a rectangular logo and 100 × 100 px for a square logo, with smaller mobile examples of 160 × 40 px and 60 × 60 px. Treat those figures as adjustable examples—not technical standards—and keep favicon and web-app icons on their own specifications.
Start with the rendered logo box, not a “magic” pixel number
Measure the CSS box available to the logo at each breakpoint. If a horizontal mark will display at about 200 × 50 CSS pixels, an export around 400 × 100 physical pixels gives a 2× density source. A square mark needs a square box; placing it in a wide box usually creates unwanted empty space or forces cropping. The correct file therefore depends on:
- the logo’s natural aspect ratio (horizontal, vertical, or square);
- the maximum width and height available in the header, footer, or navigation;
- desktop, tablet, and mobile breakpoints;
- whether the image is raster or scalable; and
- the upload and format rules of your CMS, theme, email system, or app shell.
Design one master asset, then export variants that fit the real boxes. Do not apply Google’s favicon minimums to a header logo, and do not assume a header export is suitable for an app manifest.
Practical website-header dimensions
Shopify’s Website Image Size Guidelines for 2026 lists these suggested logo sizes. They are examples that may need adjustment for responsive design, not mandatory requirements.
#1 Best Overall
| Placement or shape | Example dimensions | How to use the example |
|---|---|---|
| Desktop rectangular logo | 400 × 100 px | Starting point for a 4:1 horizontal mark when the header has room for it. |
| Desktop square logo | 100 × 100 px | Starting point for a compact symbol or badge in a square slot. |
| Mobile rectangular logo | 160 × 40 px | Smaller horizontal export for a constrained navigation bar. |
| Mobile square logo | 60 × 60 px | Compact square export where header height is limited. |
A separate Shopify guide, Logo Size Guide for Websites and Social Media (2025), gives additional examples: 160 × 160 px for vertical designs and 250 × 150 px, 350 × 75 px, or 400 × 100 px for horizontal designs. The range demonstrates why orientation and placement matter more than a universal number.
How to convert a display box into an export
- Record the largest CSS width and height at each breakpoint.
- Preserve the logo’s original aspect ratio; never stretch it to fill a different shape.
- Multiply the intended CSS dimensions by the density you need (commonly 2× for a raster export) and check the resulting file size.
- Test the actual page with navigation open, because the logo often shares vertical space with menus, search, or account controls.
- Keep a larger master so you can create new variants without repeatedly enlarging a compressed file.
Header, footer, favicon, and app icons are different assets
One of the most common implementation errors is reusing a header logo everywhere. Each placement has a different shape, rendering context, and platform rule.
| Asset | Shape and sizing concern | Relevant guidance |
|---|---|---|
| Header or footer logo | Fits a responsive rectangular or square layout box. | Use the rendered dimensions and responsive variants; Shopify’s numbers are practical examples. |
| Google Search favicon | Must be square (1:1). | Google Search Central states it must be at least 8 × 8 px and recommends larger than 48 × 48 px for its search surfaces. |
| Web app manifest icon | Provide icons at the actual raster sizes you have; scalable SVG can declare sizes: "any". |
MDN’s manifest guidance lets browsers and operating systems choose among supplied icons. |
Google Search favicon requirements
Google’s favicon guidance applies to organic Search results, not to your site header. The icon must be square and at least 8 × 8 px; Google recommends a size larger than 48 × 48 px. Supported formats listed by Google are BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF. Keep the favicon URL stable, and make sure Googlebot can crawl both the file and the home page. The favicon should represent the site rather than a generic unrelated symbol.
Web app manifest icons
For a web app manifest, declare each raster icon’s real dimensions in the sizes member and provide its MIME type in type, such as image/png. MDN documents sizes: "any" for scalable SVG. Supplying several exact raster sizes gives the browser and operating system choices; it does not change the dimensions your header needs.
Choosing a file format
There is no universal format rule for every logo placement. Confirm what your CMS and target platform accept before exporting.
Raster files
PNG, JPEG, and other raster formats store a fixed pixel grid. They are useful when a platform requires a bitmap or when you need predictable dimensions. Export at the largest required density, inspect small text at 100% zoom, and avoid repeatedly recompressing the same file. A transparent background is appropriate only when the logo is designed to sit over changing colors and the destination supports transparency.
Vector files
When your upload pipeline accepts SVG, a vector master can scale to different display boxes without changing its geometric detail. Sanitize and test the SVG in your CMS and Content Security Policy, and retain a raster fallback for systems that do not accept SVG. The manifest-specific sizes: "any" value is not a general requirement for header images.
Color, contrast, and transparent backgrounds
Check the logo against every header background, including dark mode if your site offers it. A transparent file can reveal unexpected pixels or a white box if the export was flattened incorrectly. Provide a light and dark treatment only when the design system needs both; do not solve a contrast problem by stretching or adding arbitrary padding.
Recommended Free Tools
Rank #3
Responsive implementation without distortion
Use CSS to control display size while preserving the intrinsic ratio. A simple pattern is:
<img src="/brand/logo-400x100.png" alt="Your company" width="400" height="100">Set the displayed width in CSS (for example, a smaller width inside a mobile navigation) and let height remain automatic. Supplying width and height attributes reserves layout space and reduces shifts while the image loads. If desktop and mobile compositions are genuinely different—such as a wordmark on desktop and an icon on mobile—use separate assets rather than shrinking illegible text into the same file.
Accessibility and search metadata
Write alt text that identifies the destination or function. For a linked site logo, the organization name is usually more useful than “logo image.” If the logo is purely decorative beside a text heading, an empty alt value can prevent redundant announcements. Google’s Image SEO guidance recommends descriptive alt text and cautions against using a generic site logo as the primary image in image metadata. That image-search advice does not define header dimensions.
A production checklist
- Measure the real header and footer boxes at desktop and mobile breakpoints.
- Choose a variant whose aspect ratio matches each box.
- Export a high-quality master and the raster sizes your platforms actually require.
- Keep favicon files square and larger than Google’s 48 px recommendation when practical.
- Declare manifest icon
sizesandtypevalues accurately. - Verify stable favicon URLs and crawler access to the icon and home page.
- Test light and dark backgrounds, high-density displays, and slow loading.
- Check alt text, keyboard focus, and the linked logo’s accessible name.
- Inspect the page at every responsive breakpoint before publishing.
Troubleshooting common logo problems
The logo looks blurry
Cause: the raster file is being displayed larger than its intrinsic pixels or has been repeatedly compressed. Fix: export a larger density variant from the master, then confirm the browser is loading that file rather than an old cached copy.
Rank #4
The logo is stretched or squashed
Cause: CSS or an image editor is forcing both width and height. Fix: constrain one dimension and preserve the intrinsic aspect ratio; use a different orientation variant when the available box changes shape.
The mobile header is too tall
Cause: a desktop-sized asset or excessive transparent padding is setting the row height. Fix: trim unused canvas, use the mobile dimensions as a starting point, and test the navigation controls at the smallest supported viewport.
Google does not show the favicon
Cause: the icon may be non-square, smaller than the minimum, blocked from crawling, or served from a URL that changed. Fix: use a square file, keep its URL stable, allow crawling of the icon and home page, and wait for Google to recrawl; Google’s guidance does not promise immediate display.
The manifest icon is ignored
Cause: the declared sizes or MIME type does not match the file, or the SVG is not declared as scalable. Fix: correct the manifest metadata, provide exact raster sizes, and use sizes: "any" only for an SVG that is actually scalable.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesPreview responsive logo rendering with ScreenshotNeo
After you have built the page, ScreenshotNeo can capture the rendered result at your chosen viewport so you can compare desktop and mobile logo variants. It is a website screenshot API at screenshotneo.com; its options include device presets, custom viewports, retina scale, dark mode, waiting for a selector or network idle, and custom CSS. The service removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.
One GET request returns an image or PDF. See the parameter reference in the ScreenshotNeo documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to test your logo at real breakpoints.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
