Logo sizing for websites is one of those questions that feels like it should have a simple answer but requires more nuance than most guides provide. The correct website logo size depends on several factors: where the logo appears on the site, what device the visitor is using, whether the site needs to look sharp on retina displays, and how the logo is implemented in the site’s code. If you’re also wondering about the ideal pixel dimensions for different use cases, our guide on how many pixels a logo should be provides additional recommendations.
This guide covers the recommended logo dimensions for website headers and other common website contexts, the difference between display size and file size, and how to implement your logo so it looks sharp across every device.
The Website Header Logo: The Most Important Size Decision
Where Most Logos Live on a Website
What Header Logos Typically Look Like
The website header is where most logos live: a horizontal strip across the top of the page containing the logo on the left or center, navigation links, and sometimes a call to action button. Logo size for website header design needs to balance visual presence against the practical constraints of the header area: a logo that is too large dominates the header and crowds out navigation; a logo that is too small is difficult to read and does not establish the brand presence the header should create.
Recommended Website Logo Size for Headers
For most websites, a logo displayed in the header at approximately 200 to 350 pixels wide and 60 to 100 pixels tall hits the right balance. These dimensions work on standard desktop screens, scale appropriately on tablet screens, and can be adjusted for mobile through CSS. The exact dimensions that work best depend on the complexity of your logo: a simple wordmark can be smaller; a detailed emblem or combination mark with fine elements needs more display space to remain legible. Choosing the right dimensions is even easier when the logo itself is designed with scalability in mind, which is discussed in our comparison of logo design costs from freelancers vs. agencies.
Display Size vs. File Size: A Critical Distinction
Why You Need to Understand Both
The Retina Display Problem
Retina and high-DPI displays, which are now standard on most modern laptops, smartphones, and tablets, render logos at higher physical pixel density than standard screens. A logo file that is exactly 300 pixels wide will look slightly blurry on a retina screen because the display uses twice as many physical pixels to render it and must scale the image up to fill them.
The solution is to provide your logo file at double or triple the display resolution. If your logo will be displayed at 300 pixels wide, the logo image file should be 600 pixels wide (2x) or 900 pixels wide (3x). The CSS or page template then displays the image at 300 pixels wide, and the extra pixel density produces a sharp result on retina screens.
Logo Size Specifications by Website Context
| Website Context | Recommended Display Width | Recommended File Width (2x) | Format Recommendation |
| Standard desktop header | 200 to 350px wide | 400 to 700px wide in the file | SVG preferred; 2x PNG if SVG not available |
| Mobile header | 120 to 200px wide | 240 to 400px in file | SVG or 2x PNG; often the same file as desktop scaled via CSS |
| Footer logo | 120 to 200px wide | 240 to 400px in file | SVG or 2x PNG; often smaller than the header version |
| Favicon (browser tab) | 16×16, 32×32, 48×48 | Multiple sizes in ICO or PNG | ICO file or PNG sprite; icon-only version of logo |
| Open Graph image (social share preview) | 1200x630px | 1200x630px (already large) | JPG or PNG; include logo plus brand color background |
| PWA app icon | 192×192, 512×512 | Already at the correct size | PNG; rounded corners applied by OS |
Why SVG Is the Best Format for Website Logos
Resolution Independence in Practice
What SVG Does That PNG Cannot
SVG is a vector format: it describes the logo mathematically rather than as a fixed grid of pixels. This means an SVG logo renders perfectly at any size on any screen without any scaling artifacts or blurring. A 200-pixel-wide SVG logo and a 2000-pixel-wide SVG logo are the same file, and both look identical in sharpness. For website use, SVG eliminates the retina problem entirely.
When to Use PNG Instead of SVG
Some content management systems and email platforms do not support SVG files reliably. Very complex logos with photographic elements or many gradient layers may not render correctly as SVG. In these cases, a high-resolution PNG at 2x or 3x the display size is the correct fallback. Most modern website builders including WordPress, Squarespace, and Webflow, support SVG logo uploads without any issues. If you’re planning to place your logo on marketing visuals as well as your website, you may also find our tutorial on how to add a logo to a picture useful.
Mobile Logo Sizing: What Changes on Small Screens
Responsive Logo Design
The Same Logo, Smaller
Most websites use CSS to scale the header logo down automatically on mobile screens, often through a responsive max-width setting that constrains the logo to a percentage of the screen width. This works well for simple logos, but can make detailed or complex logos illegible at small mobile header sizes.
Responsive Logo Best Practices
- Test your logo in the header at the smallest screen size your website supports, typically 320 to 375 pixels wide
- If the logo becomes illegible at the mobile header scale, consider using a simplified version, such as a symbol-only version, for mobile
- Use CSS media queries to swap between a full horizontal logo for desktop and a simplified or stacked version for mobile
- Ensure the logo link area (the clickable area back to the homepage) is large enough to tap accurately on mobile, at least 44 by 44 pixels per accessibility guidelines
File Size and Page Performance
Logo Files Should Not Slow Your Website
Keeping File Size Small
Large logo files increase page load times, which affects both user experience and search engine rankings. An SVG logo is typically very small in file size, often only a few kilobytes, and loads instantly. A PNG logo at 2x resolution for a 300-pixel-wide display is typically in the range of 30 to 100 kilobytes for most logo designs, which is acceptable.
File Size Guidelines
- SVG: typically 5 to 50 kilobytes; always preferred for web use
- PNG (2x resolution, desktop header): aim for under 100 kilobytes
- PNG (3x resolution): may be 100 to 300 kilobytes; consider whether 2x is sufficient
- Optimize PNG files using tools like TinyPNG or Squoosh before uploading
- Never upload a print-resolution EPS or AI file as a website logo; these are designed for print and are far too large for web use
Final Thoughts
The right logo size for a website header is 200 to 350 pixels wide at display, with the logo file provided at 2x or 3x that resolution for retina sharpness. SVG is the preferred format because it eliminates the resolution problem entirely. Logo sizing for website contexts requires thinking about both the displayed dimensions and the underlying file resolution, because getting only one of these right produces a logo that looks soft on modern screens or loads too slowly.
Tailored Logo Designs delivers logos in every format needed for professional digital use, including optimized SVG and high-resolution PNG files ready for website implementation. If you need your logo properly prepared for web use, reach out to us.
FAQs
1. What size should a logo be for a website header?
Most website header logos display at 200 to 350 pixels wide and 60 to 100 pixels tall. The logo file itself should be provided at double this size (2x) for retina display sharpness, or as an SVG file, which eliminates the resolution issue entirely.
2. What is the best logo format for a website?
SVG is the best format for website logos because it is vector-based, renders perfectly at any size, and has a very small file size. PNG with a transparent background at 2x resolution is the correct alternative when SVG is not supported by the platform.
3. Why does my website logo look blurry on some screens?
Retina and high-DPI displays require higher-resolution logo files. If your logo file is sized at exactly the display resolution, retina screens must scale it up, and it appears blurry. Use SVG format or provide PNG files at 2x the intended display size to fix this.
4. How do I make a logo work on both desktop and mobile websites?
Use SVG format for resolution independence across all screen sizes. Use CSS to constrain the logo width proportionally for mobile. Test on the smallest mobile screen width your site supports. If the logo becomes illegible at small sizes, consider a simplified symbol-only version for mobile breakpoints.
5. What logo file size is acceptable for a website?
SVG files are typically 5 to 50 kilobytes and load instantly. PNG logo files should ideally be under 100 kilobytes. Optimize PNG files with tools like TinyPNG before uploading. Never use unoptimized print-resolution files as website logos.
