What Size Should a Logo Be for a Website?
Getting your logo size right on a website is more important than most people think. Too large and it overwhelms the layout, slows page load times, and looks unprofessional. Too small and it becomes unreadable or blurry. The truth is, there is no single “perfect” size because your logo appears in multiple places on a website, and each placement has its own ideal dimensions.
In this guide, we break down the exact pixel dimensions you need for every logo placement on your website, including headers, favicons, footers, and mobile views. We also cover how to export logos so they look crisp on both standard and retina (high-DPI) displays.
Recommended Logo Sizes for Every Website Placement
Your logo does not live in just one spot. It appears in the header, the footer, the favicon tab, social sharing previews, and more. Each context demands a different size. Here is a breakdown of the most common placements and the dimensions that work best.
| Placement | Recommended Size (px) | Notes |
|---|---|---|
| Website Header (Horizontal Logo) | 250 x 100 to 400 x 100 | Most common placement. Horizontal logos fit best. |
| Website Header (Square/Stacked Logo) | 160 x 160 | Works well for centered or stacked header designs. |
| Website Footer | 200 x 80 to 300 x 100 | Usually slightly smaller than the header logo. |
| Favicon | 32 x 32 and 16 x 16 | Simplified icon version of your logo. ICO or PNG format. |
| Apple Touch Icon | 180 x 180 | Used when someone saves your site to their phone home screen. |
| Open Graph / Social Sharing | 1200 x 630 | The image preview shown when your URL is shared on social media. |
| Email Signature | 300 x 100 to 400 x 150 | Keep file size under 50KB for fast email loading. |
| Loading Screen / Splash | 500 x 500 | Centered logo for preloader or splash pages. |
Website Header Logo Size: The Most Important Placement
The header is where your logo gets the most visibility. Most website themes and templates allocate a specific area for the logo, typically between 60px and 120px in height. The width depends on the aspect ratio of your logo.
For Horizontal (Landscape) Logos
If your logo is wider than it is tall, these are the most effective dimensions:
- 250 x 50 px for minimalist headers
- 250 x 100 px for a balanced, general-purpose size
- 350 x 75 px for wider navigation bars
- 400 x 100 px for full-width headers
For Square or Stacked Logos
If your logo is roughly square or features text stacked below an icon:
- 100 x 100 px for compact headers
- 160 x 160 px for standard headers
- 200 x 200 px as a maximum before it starts feeling oversized
Pro Tip: Always check how your logo looks on mobile. A logo that is 400px wide on desktop may need to scale down to 150px or less on a phone screen. Make sure it remains legible at smaller sizes.
Favicon Sizes: The Tiny but Essential Logo
The favicon is the small icon that appears in browser tabs, bookmarks, and history. It is one of the most overlooked aspects of website branding, but it plays a significant role in user trust and recognition.
Favicon Dimensions You Need
- 16 x 16 px – Classic browser tab icon
- 32 x 32 px – Standard favicon for modern browsers
- 48 x 48 px – Used by some Windows taskbar displays
- 180 x 180 px – Apple Touch Icon (for iOS home screens)
- 192 x 192 px – Android Chrome icon
- 512 x 512 px – PWA (Progressive Web App) icon
For favicons, you usually cannot use your full logo with text. Instead, use a simplified mark or icon. Think of how brands like Google use just the “G” or Apple uses the apple silhouette. Your favicon should be instantly recognizable even at 16 pixels.
Footer Logo Size
Footer logos are typically a bit smaller than header logos. The footer is secondary in the visual hierarchy, so the logo should complement the layout without dominating it.
- Horizontal logos: 200 x 60 px to 300 x 100 px
- Square logos: 80 x 80 px to 120 x 120 px
Some sites use a monochrome or light version of their logo in the footer, especially when the footer has a dark background. Make sure you have this variant exported and ready to use.
How to Handle Retina and High-DPI Screens
This is where many logos go wrong. On a standard screen, one CSS pixel equals one physical pixel. On a retina screen (like modern MacBooks, iPhones, and most flagship Android devices), one CSS pixel can equal two or even three physical pixels. If you only provide a standard-resolution logo, it will look blurry on these screens.
The 2x Rule
The simplest approach is the 2x rule: export your logo at double the display size.
| Display Size (CSS pixels) | Export Size for Retina (Actual pixels) |
|---|---|
| 250 x 100 | 500 x 200 |
| 350 x 75 | 700 x 150 |
| 160 x 160 | 320 x 320 |
| 32 x 32 (favicon) | 64 x 64 |
You then set the image to display at the smaller CSS size in your HTML or theme settings. The browser uses the extra pixels to render a sharper image on high-DPI screens.
Use SVG When Possible
The absolute best option for website logos in 2026 is SVG (Scalable Vector Graphics). SVG files are resolution-independent, meaning they look perfectly sharp at any size on any screen. There is no need to worry about 2x or 3x exports.
Benefits of SVG for website logos:
- Infinitely scalable with zero quality loss
- Typically smaller file size than high-res PNGs
- Can be styled and animated with CSS
- Supported by all modern browsers
If your logo was designed in Adobe Illustrator, Figma, or any vector design tool, you can export it as SVG directly. If you only have a raster version (JPEG or PNG), you may need to have it redrawn as a vector.
Best File Formats for Website Logos
| Format | Best For | Transparency | Scalability |
|---|---|---|---|
| SVG | Header logos, footer logos, inline logos | Yes | Infinite (vector) |
| PNG | Logos with transparency, favicons, fallback for SVG | Yes | Fixed (raster) |
| WebP | Performance-optimized logos with transparency | Yes | Fixed (raster) |
| JPEG | Not recommended for logos | No | Fixed (raster) |
| ICO | Favicons (legacy support) | Yes | Multi-size container |
Avoid using JPEG for logos. JPEG does not support transparency and introduces compression artifacts, especially around sharp edges and text. Always use PNG or SVG for clean, professional results.
Logo File Size: How Big Is Too Big?
Logo dimensions (width and height) are one thing. File size (in kilobytes) is another, and it directly impacts your website performance and Core Web Vitals scores.
Here are the target file sizes to aim for:
- SVG logo: Under 20KB (ideally under 10KB)
- PNG logo (standard): Under 50KB
- PNG logo (2x retina): Under 100KB
- Favicon (ICO/PNG): Under 15KB
If your logo PNG is coming out larger than these targets, try the following:
- Run it through a compression tool like TinyPNG or Squoosh
- Reduce the color depth if possible
- Consider switching to SVG format
- Export as WebP for even smaller file sizes with the same quality
How to Export Your Logo at the Right Size
Here is a step-by-step process to prepare your logo files for a website, regardless of the design tool you use.
Step 1: Start with the Vector Source File
If you have the original AI, EPS, or Figma file, start there. Vector files allow you to export at any size without quality loss.
Step 2: Export an SVG Version
This will be your primary website logo. In Illustrator, go to File > Export > Export As > SVG. In Figma, select the logo frame and export as SVG. Make sure text is outlined (converted to paths) so it displays correctly everywhere.
Step 3: Export PNG Versions at 2x
For each placement where you need a raster version:
- Header logo at 2x: If displaying at 250×100, export at 500×200
- Footer logo at 2x: If displaying at 200×60, export at 400×120
- Always use a transparent background
Step 4: Create Your Favicon Set
Export a simplified version of your logo at the following sizes:
- 16×16, 32×32, 48×48 as PNG or ICO
- 180×180 for Apple Touch Icon
- 192×192 and 512×512 for Android and PWA
Step 5: Compress Everything
Run all exported files through a compression tool before uploading to your website. Every kilobyte counts for page speed.
Common Logo Sizing Mistakes to Avoid
After working on hundreds of website projects, here are the most frequent logo sizing mistakes we see at Pixelex:
- Uploading a massive file and letting the browser scale it down. A 3000x3000px logo being displayed at 250x100px wastes bandwidth and slows your site.
- Using only a 1x resolution image. Your logo will look blurry on every modern phone and most laptops manufactured after 2018.
- Forgetting the favicon. Without a favicon, your site looks incomplete and less trustworthy in browser tabs.
- Using JPEG with a white background. This looks bad on any page that does not have a pure white header.
- Ignoring mobile. Your logo should be tested on phone screens. If the text in your logo becomes unreadable below 140px wide, consider using a simplified mobile version.
- Not having a dark mode variant. Many websites now support dark mode. If your logo is dark-colored, it will disappear against a dark background.
Logo Sizing for Popular Website Platforms
Different website builders and CMS platforms have slightly different recommendations. Here is what works best on the most popular platforms in 2026:
| Platform | Recommended Upload Size | Format |
|---|---|---|
| WordPress | 500 x 200 px (2x) | PNG or SVG |
| Shopify | 450 x 200 px (2x) | PNG or SVG |
| Wix | 500 x 300 px (max) | PNG |
| Squarespace | 400 x 200 px (2x) | PNG or SVG |
| Webflow | Any (fully customizable) | SVG preferred |
| Custom HTML/CSS | Any (set via CSS) | SVG preferred |
Quick Reference: All Logo Sizes in One Place
Here is a complete cheat sheet you can save and refer to whenever you are setting up or redesigning a website:
| Usage | Display Size | Export Size (2x Retina) | Format |
|---|---|---|---|
| Header (horizontal) | 250 x 100 px | 500 x 200 px | SVG or PNG |
| Header (square) | 160 x 160 px | 320 x 320 px | SVG or PNG |
| Footer | 200 x 80 px | 400 x 160 px | SVG or PNG |
| Favicon | 32 x 32 px | 64 x 64 px | ICO or PNG |
| Apple Touch Icon | 180 x 180 px | 180 x 180 px | PNG |
| PWA Icon | 512 x 512 px | 512 x 512 px | PNG |
| Open Graph | 1200 x 630 px | 1200 x 630 px | PNG or JPG |
| Email Signature | 300 x 100 px | 600 x 200 px | PNG |
Frequently Asked Questions
What is the best logo size for a website header?
The most commonly used and recommended size for a website header logo is 250 x 100 pixels for display, with the actual file exported at 500 x 200 pixels (2x) to ensure sharpness on retina screens. If your header design is wider, you can go up to 400 x 100 pixels.
Should I use PNG or SVG for my website logo?
SVG is the best choice whenever possible. It scales perfectly on all screen sizes and resolutions without increasing file size. Use PNG as a fallback if your platform does not support SVG uploads, or for favicons where SVG support may be limited.
What size should a favicon be?
You need multiple sizes: 16×16 and 32×32 for browsers, 180×180 for Apple devices, and 192×192 plus 512×512 for Android and Progressive Web Apps. Use a simplified version of your logo, not the full logo with text.
How do I make my logo look sharp on retina screens?
Export your logo at 2x the display size. For example, if your logo displays at 250×100 on screen, the actual image file should be 500×200 pixels. Alternatively, use SVG format, which is resolution-independent and always sharp.
Is 500×500 pixels a good logo size for a website?
A 500×500 pixel logo works well as a general-purpose master file, but it is rarely the right size for direct use in a header. Square logos in headers typically display at 100×100 to 160×160. A 500×500 file is useful as a source for generating smaller versions.
Why does my logo look blurry on my website?
The most common reason is that your logo file is too small for the space it is being displayed in, or you are not providing a 2x version for retina screens. Upload a higher resolution version or switch to SVG format to fix this.
What is the maximum file size a logo should be?
Keep your logo file under 100KB for raster formats (PNG, WebP) and under 20KB for SVG. Larger files slow down page load times and negatively affect your Google Core Web Vitals scores.
Do I need different logo sizes for mobile and desktop?
Most responsive websites automatically scale the logo down on mobile. However, if your full logo becomes unreadable at small sizes, consider uploading a separate simplified version for mobile. Some themes and page builders support setting different logos for mobile views.
