What logo size should you use?
There is no single correct logo size. There is a system of sizes, and a logo built to survive all of them. Here are the dimensions that matter and how to design for them.
The question gets asked as though there is one answer, and there is not. A logo appears as a 16 pixel favicon and as a two metre banner, and no single file serves both. What you actually need is a set of sizes and a mark designed to survive all of them.
This guide covers the dimensions that come up most often, then the part that matters more: the system that stops you asking the question again every time a new platform appears.
Start with the format, not the pixels
Before any dimension, decide what kind of file you are placing. This single choice removes most sizing problems.
- SVG for anything on the web. Vector artwork scales to any size with no loss and usually weighs less than a PNG. If your site logo is a PNG, that is the first thing to fix.
- PNG with transparency for places that will not take SVG, exported at twice the display size so it stays sharp on high-density screens.
- ICO or PNG for favicons, because browsers still expect specific small square files.
- PDF or EPS for print, where pixels are irrelevant and vector is the only sensible answer.
Get this right and the rest of the guide becomes a checklist rather than a series of compromises.
Website logo sizes
For a header logo, think in display height rather than absolute pixels. Most site headers sit between 40 and 60 pixels tall, and a horizontal logo occupying roughly 120 to 250 pixels of width inside that reads comfortably without dominating the navigation.
- Header logo: around 40 to 60px tall as displayed. Supply SVG, or a PNG at twice that height.
- Footer logo: usually smaller, 30 to 40px tall, often in a single colour.
- Favicon: 32x32px, with a 16x16px version. Keep an SVG favicon too where supported.
- Apple touch icon: 180x180px, on a solid background rather than transparency.
- Open Graph share image: 1200x630px. This is a share card containing your logo, not the logo itself.
The number that catches people out is the favicon. At 32 pixels square, a full horizontal logo with a wordmark is unreadable. You need a separate icon or monogram, which is why the responsive system further down matters more than any single measurement.
Social media profile sizes
Platforms change their specifications regularly, so treat these as the working shape rather than gospel and check the platform when it matters. The durable advice is about the shape, not the pixel count.
- Profile images are square and displayed as a circle on most platforms. Design for the circle: anything in the corners will be cropped away.
- Supply profile images at around 400x400px or larger. They are displayed far smaller, often under 50 pixels in a feed.
- Cover and banner images are wide and heavily cropped on mobile. Keep the logo away from the edges.
- For the profile image, use the icon or monogram, not the full lockup. A wordmark inside a small circle is illegible.
If your logo needs to be read at 32 pixels and on a billboard, it is not one file. It is a system.
The responsive logo system
This is the part that actually answers the question. Strong brands do not resize one logo. They design a small family of marks, each built for a size range, all obviously related.
- 01Primary lockup: the full logo, usually icon plus wordmark. Used wherever there is room, such as a site header, a document, or signage.
- 02Secondary or stacked version: the same elements rearranged for narrower spaces, like a mobile header or a square advert.
- 03Icon or monogram: the mark alone, or a single letter. This is your favicon, your app icon and your social profile picture.
- 04One-colour version: solid black and solid white, for embroidery, engraving, single-colour print and any dark or light background.
With those four in place, the sizing question resolves itself. You are no longer shrinking one artwork until it stops working; you are choosing the right member of the family for the space you have.
Clear space and minimum size
Two rules do most of the work of keeping a logo looking deliberate wherever it lands.
Clear space is the protected margin around the logo that nothing else may enter. Define it relative to the logo itself, for example the height of the letter in the wordmark, so it scales automatically. Minimum size is the smallest the logo may be reproduced before it stops being legible. Test it by printing at that size rather than judging on screen.
Both belong in your brand guidelines. Without them, the logo will be squeezed into places it was never designed for, and the inconsistency reads as carelessness long before anyone can articulate why.
A practical checklist
- 01Export the primary logo as SVG, plus PNG at twice display size.
- 02Create the stacked and icon-only versions.
- 03Produce a 32x32 and 16x16 favicon from the icon, not the full lockup.
- 04Export a 180x180 apple touch icon on a solid background.
- 05Make solid black and solid white versions.
- 06Write down the clear space rule and the minimum size.
- 07Check the icon at 32 pixels on an actual phone, not a zoomed desktop preview.
If you can tick all seven, you will not need to look up logo dimensions again. If you cannot, the gap is usually not a missing file size but a mark that was designed at one scale and never tested at the others.
