A standard website header logo is 200 × 60 px (about 3.3:1). Retina displays need a 2x version (400 × 120 px), and SVG is preferred over PNG for infinite scaling.
A website logo needs to be crisp on desktop retina displays and legible on mobile navigation bars. Here are the recommended 2026 dimensions for site headers, footers, and favicons.
| Asset | Dimensions | Ratio | Format | Max size |
|---|---|---|---|---|
| Standard Header Logo | 200 × 60 | 3.3:1 | SVG / PNG | 100 KB |
| Retina Header (2x) | 400 × 120 | 3.3:1 | PNG | 200 KB |
| Mobile Header Logo | 120 × 40 | 3:1 | SVG / PNG | 50 KB |
| Footer Logo | 150 × 45 | 3.3:1 | SVG / PNG | 50 KB |
| Square Mark / Icon Logo | 64 × 64 | 1:1 | SVG / PNG | 50 KB |
| Open Graph Logo (share preview) | 1200 × 630 | 1.91:1 | JPG / PNG | 1 MB |
Pro tip: Use SVG for site logos whenever possible — it stays crisp at any size and works at retina 3x without a separate export.
Resize your image to Website Logo size now
The tool below is pre-configured for Website Logo. Nothing uploads — every resize runs locally in your browser.
Drop your image here
JPG · PNG · WEBP · HEIC — processed locally
Free: up to 2 platforms · Need more? View pricing →
Social
Ads
Logos & Branding
Crop mode
Fill crops to exact size · Fit pads to preserve full image
Format
PNG for logos · JPG for photos · WEBP for web
2 free exports remaining today
Live preview
Your preview will appear here
How to Prepare a Site Logo for Every Device
- Export the master logo as SVG.
- If SVG isn't possible, export at 2x (400 × 120 for a 200 × 60 display size).
- Set the display size in CSS:
width: 200px; height: auto;. - Add a smaller mobile version (120 × 40) for mobile-only breakpoints.
Common mistakes to avoid
- Uploading a 1x PNG — retina displays blur it.
- Using a text-only logo at 16 × 16 favicon size — it becomes unreadable.
- Forgetting a square icon-only version for social profiles.
Frequently asked questions
What size should a website logo be in 2026?
The standard header logo is 200 × 60 px. Retina displays need a 2x version (400 × 120 px), and SVG is preferred for infinite scaling.
SVG or PNG for website logos?
SVG whenever possible — it's smaller, sharper, and scales to any resolution. PNG is the fallback for logos with photographic detail or gradients that SVG can't reproduce.
What is the retina logo size?
The retina logo is exactly 2x the display size. A 200 × 60 header logo needs a 400 × 120 retina version to stay crisp on high-DPI screens.
How large should the mobile logo be?
Mobile header logos should be about 120 × 40 px so they fit inside the standard 56 px mobile header height.
What size is a logo for the Open Graph preview?
Open Graph preview images are 1200 × 630 px (1.91:1). Center your logo with padding so it survives every platform's crop.
Why does my logo look blurry on retina displays?
Retina displays render at 2x pixel density. If you upload a 200 × 60 logo, retina screens upscale it and blur the edges. Ship a 400 × 120 version and set width: 200px in CSS.