Your logo has a massive impact on the perception of your organization. It’s critical to keep it looking crisp, whether it’s on your website, your email signature, or the side of a blimp. But how do you know what size your logo should be?
The answer? It varies.
Online platforms all have different requirements. The standard size of a logo depends on which platform you’re going to use. For example, a YouTube profile photo is 800 pixels x 800 pixels; a logo for a website often has a maximum height of 100 pixels. If all you have is the website logo, it’s going to look really fuzzy on your YouTube profile!
You can create your logo yourself using popular online tools like Canva, or hire a professional. Either way, having easy-to-resize PNG and vector files will help you adapt your logo accordingly. Bear in mind that online “free” tools often offer resizing only after a paid upgrade.
Logo Sizing Basics
Every logo is unique, but the sizes in which you save and share them are not. Great logos can be resized, and quickly produced across hundreds of different contexts.
Whether you want your logo on a business card, or on a giant billboard, it needs to be scalable. This means that if you did end up putting your logo on a billboard, it would still look clean and detailed (not pixelated).
Here are a few logo sizing basics:
- Logos are measured in pixels, which means you’ll often see them referred to in dimensions like 500px by 500px. Pixels = dimensions, whereas bytes (KB/MB/GB) = the file size.
- Vector files are necessary. A vector file is a file ending with .SVG, .AI, or sometimes .PDF (depending on how the PDF was created). EPS is another vector file type, although it’s older and doesn’t support transparency. Vector files are based around mathematic formulas, which means they can be scaled infinitely. They’re created in programs like Adobe Illustrator, and can then be converted to any other file format that you need, such as PNGs or JPGs.
- Horizontal, vertical, and square versions of your logo are good to have. These variations allow you to place your logo wherever you see fit; for example, a billboard, backdrop, website, business card, or T-shirt.
- Use a PNG file to display your logo online that’s less than 200KB, ensuring fast load times while remaining detailed and sharp! PNGs are lossless compressed files, which allows them to maintain a lot of quality while having a relatively small file size. They also allow for transparency/transparent backgrounds and are great for social media, websites, and most other online cases.
- A brand guidelines document outlines where and how a logo can be displayed, and at what file dimensions. This allows your brand to remain consistent across all communications. This isn’t just for big corporations, but you’ll find that if you’ve noted the type of font used, as well as the names of the colours, you’ll save yourself – or someone else – a ton of homework later on.
Logo sizes for websites
Websites are a critical part of any business. This is where people can learn more about what you do, your company vision, and gauge if they’re interested in finding out more. Even if your website serves only as an “online bookmark” so people can physically find your business, it must look smooth and sharp. A fuzzy or distorted logo is the first turn-off.
The best logo size for a website really depends on how and where it’s going to be displayed.
The most common areas to display a logo on a website are in the top banner/header, and the favicon (the small icon next to your address bar or the title on your browser tab). I will often include a version in the footer as well, to help keep the brand visible if a user scrolls to the bottom of the page.
Using a logo in your website header
Most companies display a logo on the left-hand side or centre of the top nav bar. This allows the brand to be present on all pages of the website. If you’re using a website builder like Squarespace or Weebly, you’ll have an option to add in the logo to this spot.
The logo size for your website header, as well as the positioning, will depend on the website builder and theme you’re using. For example, Squarespace’s Bedford family of themes requires logos with a maximum height of 100px for desktop.
The average height of a website logo is typically between 20px and 30px, while the width often varies depending on how long the brand name is. See how my 100 Women Who Care group uses their logo and icon in the navigation bar of their WordPress website below:
Using a logo in your favicon
Favicons allow your brand to be present in the search bar, allowing customers and leads to tab back and forth between your site and others easily. These images tend to be just the icon that represents your brand, as they are too small to read any text. Standard favicon sizes for browsers are 16px x 16px. Did you notice the one in the image above for the 100 Women Who Care?
Logo sizes for social media
Social media is one of the most prominent applications for displaying your logo. Ideally, you choose your social media streams to connect with your audience and communicate your mission and your passion.
Each social platform will involve multiple images for your brand, such as profile photos, cover photos and banners, and actual image posts. Profile photos tend to be circular or square, banners are more narrow and rectangular, while image posts can be square, horizontal, or even vertical depending on the style you’re going for.
Below are some basics to get you started. Bear in mind these can change from time to time, so you might want to do a quick google search before you commit to anything listed here:
Logo dimensions on Instagram:
Profile photo (circular): 110 x 110px on mobile, 180 x 180px desktop
Logo dimensions on Facebook:
Profile photo (square): 170 х 170px
Logo dimensions on YouTube:
Profile photo (circular): 800 x 800px
Thumbnail photo: 1280 x 720px
Logo dimensions on Twitter:
Profile photo (circular): 400 x 400px
Logo dimensions on LinkedIn:
Profile photo (circular): 400 х 400 px
Logo dimensions on Pinterest:
Profile photo (circular): 280 x 280px
PNG or JPG?
When posting on social, use a PNG file! PNG is a lossless compressed format that allows you to retain transparency. Transparency is important because it means you wouldn’t have a white background on your logo, over a coloured header bar. Again, check out my 100 Women image above to see how a logo on a transparent rectangle can show beautifully on a photo background.
JPG files are lossy compressed, meaning the file size may be a bit smaller than a PNG, but the quality also decreases, leaving some logos looking pixelated or “soft.”
Logo sizes for print
Thinking about swag for your staff or for giveaways? When you want to start making some swag, the opportunities are almost overwhelming: T-shirts, brochures, business cards, posters, clothing, packaging, mugs, pens… !
Here are some common logo sizes for print:
- The maximum size that can be screen printed on a T-shirt is usually 14’’ x 15’’
- On an 11 oz. mug, the standard print size area is 8.5″ x 3″
- On an average hat, the logo size is around 3″- 3 1/2″ wide
If you’re planning on printing your logo onto something, first check with your provider about standard print sizes so you can send them the correct files. This is where that vector file is going to be necessary, as most providers will also request a vector-based file so that the logo can be scaled up or down without losing any quality.
SPECIAL NOTE: Vector files have a CMYK color mode — Cyan, Magenta, Yellow, and Black — which is what’s required for printing, versus a HEX color code, which is based on RGB – Red, Green, Black – and used online.
Logo sizes for email signatures
Email signatures can be a great place to display your logo. It’s another place to help further display and promote your brand. But use caution – most email clients don’t automatically download images. And, including an image make your email more likely to end up in the recipient’s junk folder.
If you use your logo in your email signature, make sure it is PNG format and is smaller than 10KB. Keep it small to reduce the load on the receiver’s device. This will also help ensure the logo doesn’t get removed to a separate attachment to your email.
This shouldn’t come as a surprise: Did you know that 54% of email is opened on a mobile device? That means over half of all email recipients are unable to read email signatures that aren’t designed to scale on mobile. Phone or mobile screens are much smaller than computers. Choose type and graphics that remain legible when scaled down significantly. Make sure any buttons you include (like social media icons) are easy to tap – which means leaving some white space in between them.
Other Logo Considerations
Many organizations think they should have one logo and that’s it – no modifications or alterations. But chances are you won’t be able to fit your logo as-is into every application. Just like for my 100 Women website above, you’re not likely to fit your logo into a 16×16 pixel square.
Colour and design variations can actually make your life easier and should be incorporated with any good design proposal. Check out my next article coming soon, which will give some examples!