As a marketer and blogger, I've built at least eight websites in my career, and I must admit: Logo size is usually the last thing on my mind (hey, I didn’t say I was a designer).
But my most recent blog project made me realize how important it is to get logo size and file format right (and how tricky it is to do so).
Since my blog is about Seattle, the logo features the iconic Space Needle. While it looked good in the header, it was way too big in the footer. Then, because I exported it as a JPEG, the logo lacked transparency, making its white background clash with the website’s pink background. Oops.
I may be a designer’s worst nightmare, but the designers here at HubSpot were gracious enough to chat with me and settle my burning questions: What is the ideal logo size?
And why does paying attention to your brand’s logo matter?
So, whether you’re trying to upload a logo to your CMS or social media, or send it off to a print shop for some branded swag, below is what I learned about choosing the ideal logo size and file format for every asset.
Table of Contents
- Logo Size Basics: What You Need to Know
- Logo Size for Websites: The truth is, it’s complicated.
- Logo Sizes for Social Media
- Logo Sizes for Print: What Is the Best File Format for Printing Logos?
- Logo Sizes for Mobile Apps
- Logo Size: More Important (and Complex) Than You Might Think
Logo Size Basics: What You Need to Know
“Logos are meant to reinforce brand identity,” Juan Manuel Devia Pinzon, Associate User Experience Lead at HubSpot Digital, reminds me.
He says, “It is very damaging for a business when a customer browses the website, and the logo they see at the top of the page is not the same one that you get on their email after signing off for an offer or newsletter.”
1. The size you upload is not always the size that displays.
In responsive web design, websites automatically process and optimize uploaded images for faster load times and to accommodate different screen sizes and resolutions.
That means that the logo size you upload may be different from the logo size that ends up displayed.
Intrinsic size refers to the size of the original file. Rendered size is the size of the image that actually displays. The site you upload your logo to will typically resize your logo for you—so it’s crucial to know what it will be resized to (the rendered size).
You want the intrinsic size to be equal to or greater than the rendered size, preferably greater than.
For the reasons above, uploading a larger size is typically better than uploading a size that’s too small.
“For instance, a 1:1 [square] logo for a 150x150 Instagram user profile picture may be 100 x 100 pixels or 1000 x 1000 pixels,” explains Pinzon. “The higher-resolution image is typically better due to its enhanced clarity. In most scenarios, it is advisable to prioritize scaling down to maintain clarity rather than upscaling, which can lead to blurriness and distortion.”’
Pinzon illustrates his point in the graphic below:
2. Choose the right file format based on the asset.
The right file format depends on a few things:
- Which file types are supported by the platform you’re uploading to? Some platforms don’t allow you to upload a GIF, for example.
- Are you trying to make edits to the logo? If you want to edit the file, a vector format like SVG is ideal.
- Do you want to prioritize image quality or page load time? PNG files typically retain quality better than JPEG files, but JPEGs are more compressed and load faster.
- Does your logo need to have a transparent background? This is often the case when you’re uploading your logo to a website with a background that is a color other than white. JPEG files cannot support transparency. PNG files can.
Hot tip: Make your logo background transparent with a free Canva Pro trial to export images as PNG.
3. Have multiple logo versions and aspect ratios.
Your logo needs to accommodate various assets: digital collateral like your website and social media account and print collateral like branded T-shirts or posters.
“Design for flexibility,” recommends HubSpot graphic designer Malary Lee, “making sure your logo can fit various sizes and formats. Having different versions of the logo ready can be a key to success, like a horizontal and vertical design.”
For that reason, make sure you have multiple types of logos, including:
- Horizontal
- Vertical or square
- Light background
- Transparent background
- Dark background
- Black and white
You’ll notice in the screenshot below of Qwoted’s website that there are two logos: One in the header that is horizontal and one in the footer that is more square.
Having logo options with different aspect ratios will make your logo more versatile across web and print assets.
Pinzon recommends:
- 1:1 (square) for social media profile pictures, favicons, and app icons
- 16:9 (landscape) for videos, website headers, and marketing materials.
“The 16:9 ratio provides additional space for combining a logotype (logo with business name), enhancing brand recognition,” he explains.
Notice how HubSpot’s sprocket logo is perfect for a 1:1 aspect ratio, and its logotype (“HubSpot” with the sprocket logo inside it) is ideal for 16:9:
4. Let your logo “breathe.”
It may be tempting to make your logo as large as possible on a website or profile photo, but it’s not good design. You don’t want the edge of your logo to bump up right against the edge of another design element.
.png)
Free Website Design Inspiration Guide
77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You
- Agency Pages
- Ecommerce Pages
- Tech Company Pages
- And More!
Download Free
All fields are required.
As Pinzon explains, “While common sense might lean toward maximizing logo size, neglecting to add empty space can detract from a professional-looking logo and create visual clutter within the overall content layout.”
Instead, give your logos sufficient space from other elements for a cleaner design and better user experience.
Logo Size for Websites: The truth is, it’s complicated.
Many of the blog posts you find that recommend logo sizes for various platforms are conflating upload size (the size of the original file you upload) and display size (the size of the processed file displayed on your screen).
To clear up any confusion, in this article, I will distinguish between:
- Upload size (AKA intrinsic size), which is the size of the original file that you upload to your CMS or to a social media platform and
- Display size (AKA rendered size), which is the size of the image that actually ends up displayed on the screen
What is the standard logo size for a website?
While there’s no one-size-fits-all “standard logo size,” a good starting point for a website logo is a display size of 200 x 100 pixels (2:1 aspect ratio). If you have a square logo, try 100 x 100 pixels (1:1 aspect ratio) as a baseline.
Be sure to test how your logo looks on your website and adjust size accordingly.
There is no “standard logo size” because it is highly dependent upon your website design and logo design. Based on my research, though, most desktop websites display their logos at no wider than 200 pixels and no taller than about 85 pixels.
Any wider or taller than that, and the logo takes up too much space.
Remember, your logo is not meant to fill the entire header; that’s what your hero image is for. Notice how the website below beautifully balances the logo size with the much wider hero image beneath it.
For reference, the ÁTHOS logo is being displayed at 170 x 95 pixels.
If you’re using a CMS like WordPress, the CMS will likely resize the logo for you automatically when you upload it. The same is true for social media sites like Facebook and Pinterest.
Other content management systems, like HubSpot CMS, allow you to input the dimensions you would like your logo to be displayed on the website, which is why you need to know the ideal display size.
Now, let's talk about upload size. For upload size, remember that larger is usually better because even if it gets scaled down, it‘ll retain its sharpness (whereas if a smaller file gets scaled up, it’ll look blurry).
The designers I spoke to highly recommended using a source file in a vector format, specifically SVG, because vectors can scale infinitely without losing quality.
However, SVGs can only be opened on specific design programs, like Photoshop, Illustrator, or Canva. You’ll need an SVG editing program to create and modify them.
If you have the more popular raster file type (JPEG or PNG), the best standard logo size for your source file is at least 800 pixels wide. The height will depend on your logo’s design and aspect ratio.
- So, if you have a square logo (aspect ratio of 1:1), opt for a logo size of 800 x 800 pixels.
- If your logo is horizontal (aspect ratio of 4:3 or 16:9), choose a logo size of 800 x 450 pixels.
How did I arrive at the above dimensions? I scoured dozens of websites and read the documentation available for social media sites and mobile app stores. The largest recommended profile picture size for any social media platform (all of which are listed below) is 400 x 400 pixels.
With a source file width of 800 pixels, your logo will have plenty of room to scale down while remaining crisp (versus scaling up from a smaller file, which would result in a pixelated image).
The widest logo I found (Johnson & Johnson) was displayed on the company’s website at 246 pixels wide, which makes sense as the logo involves a longer-than-usual name.
The tallest logo I found (Harvard Business School) was displayed on the college's website at 86 pixels tall to accommodate the height of the shield logo.
So yes, 800 pixels wide is a great starting point for a logo upload size. The height will vary depending on your logo’s design.
What is the best file format for website logos?
PNG is the best file format for website logos because it has two advantages over JPEG: higher image quality and the ability to have a transparent background.
Alternatively, if you have some extra time and want to learn a useful design skill, consider SVGs. With this file format, you can make your logo as big as you want, and it won’t become blurry.
If you don’t have access to a design program like Illustrator or Photoshop, Canva Pro lets you upload and edit SVG files. The problem with SVGs, though, is that many CMSs do not allow them.
Free Website Design Inspiration Guide
77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You
- Agency Pages
- Ecommerce Pages
- Tech Company Pages
- And More!
Download Free
All fields are required.
Website Header
Recommended upload size: 800 x 400 pixels
Recommended display size: 200 x 100 pixels
File type: PNG or SVG
The header of a website is wider than it is tall, which makes a rectangular logo ideal. If you can control your logo’s display size on your website, aim for at least 200 x 100 pixels for a rectangular logo or 100 x 100 pixels for a square logo.
Favicon
Recommended upload size: 512 x 512 pixels
File type: PNG
The favicon displays at 16 x 16 pixels in a browser tab, but you should upload a much larger size to account for the many other larger sizes it might be displayed at. Aim for an upload size of 512 x 512 pixels, as recommended by WordPress.
The favicon is the small square image you see in the browser tab that differentiates each website from the multiple ones you have open at one time in your browser (and if you’re me, that’s upwards of 30).
So, it’s important because it helps your site stand out in a sea of tabs.
I bet you can guess the website on each tab below just by looking at the favicons:
Logo Sizes for Social Media
For all of the social media logo sizes below, I am specifying a recommended upload size of your photo.
I arrived at these sizes by reading the help center information from each platform (when available), testing the platforms by uploading images myself, and inspecting other brands’ social media.
Profile photo: 1080 x 1080 pixels
File type: PNG or JPEG
Why upload a size larger than what Instagram displays? Well, according to Instagram’s Help Center:
“When you share a photo on Instagram, regardless of whether you're using Instagram for iPhone or Android, we make sure to upload it at the best quality resolution possible (up to a width of 1080 pixels).”
You want to upload at the highest resolution the platform will allow.
Instagram adds, “If you share a photo at a lower resolution, we enlarge it to a width of 320 pixels.” So, to avoid a blurry image, don’t upload a profile photo smaller than 320 x 320.
X (formerly Twitter)
Profile photo: 400px x 400px
Header photo: 1500px x 500px
Profile photo: 480px x 480px
Page cover photo: 1880px x 696px
File type: PNG
The Facebook Help Center says the Page profile picture will be displayed at 176 x 176 pixels, but I found that it won't let you upload anything smaller than 180 x 180. When I tried to upload a 150 x 150 image, Facebook gave me this warning:
So definitely don’t attempt an upload of a logo size below 180 pixels wide.
Further, Facebook automatically scales down profile photos. I uploaded a photo at 800 x 800, which was resized to 480 x 480.
Hot tip: While the Facebook Help Center at the time of writing recommends a page cover photo size of 851 x 315, I found in my research that that is not a good idea if you want a crisp image.
Facebook is actually displaying the cover photo at about 940 x 348 pixels, so upload a cover photo at least that size.
Brands that followed the 851 x 315 guideline had pixelated cover photos, while brands that uploaded a larger size (like HubSpot, which uploaded 1277 x 473) had sharp images.
Profile photo: 280px x 280px
File type: PNG or JPEG
Pinterest will allow you to upload suboptimal logo sizes—so beware. I uploaded a logo that was 110 x 110 (smaller than the displayed size), and it let me do so. The result? A very blurry image because Pinterest stretched it out so that it would fill the frame.
TikTok
Profile photo: 400px x 400px
File type: PNG or JPEG
Shockingly, the TikTok help center says that the minimum allowable profile photo (PFP) size for uploading is 20 x 20 pixels. It let me upload a PFP of that size, but it was extremely pixelated and didn‘t even fill the circular frame on my profile page.
I then tested uploading a PFP at 200 x 200 pixels, and while it looked great on my profile page, it would become pixelated if someone were to tap the photo to view it zoomed in or on a desktop.
That’s why I recommend 400 x 400 pixels: It was the right size to remain sharp even when tapped and seen in full or viewed from a computer screen.
Free Website Design Inspiration Guide
77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You
- Agency Pages
- Ecommerce Pages
- Tech Company Pages
- And More!
Download Free
All fields are required.
Profile photo (square for companies): 400 x 400 pixels
Cover image: 1128px x 191px
File type: PNG or JPEG
Maximum size: 3MB
Unlike the circular profile photos on LinkedIn pages for people, company pages feature a square profile photo, so you don’t have to worry about your logo getting cut off.
Still, it’s good design practice to keep some space in the margins so the edges of your logo don’t bump up right against the frame.
Snapchat
Profile photo: 320px x 320px minimum
Header image: 375px x 569px
File type: PNG or JPEG
Maximum size: 2MB
Keep in mind that even though Snapchat requires the header image to be uploaded at a size of 375 x 569 px, the header image will display at 375 x 258 pixels, meaning the height will be cut off.
You might need to play around with different images to see where it gets cut off and ensure it looks good.
YouTube
Profile photo: 800px x 800px
Banner image size: 2560px x 1440px
File type: PNG or JPEG
Logo Sizes for Print: What Is the Best File Format for Printing Logos?
The best file format for printing your logo is a vector image like SVG, AI, PDF, or EPS.
Using the wrong file format is the biggest logo mistake Christine Geronimo sees in her Seattle-based apparel print shop, Midnight Supply Company.
“We need vectorized files that are scalable for print,” she explains. “AI, EPS, and PDF are preferred because they keep the quality of the image, details, colors, and layers intact, no matter the size.”
Vector files are file types that allow the designer to resize it (make it smaller or larger) within a design program like Adobe Photoshop or Illustrator—without sacrificing image quality.
You can see why this would be useful when printing a logo on, say, a shirt: The print shop can adjust the logo as needed to ensure the best shirt possible.
But could you use a JPEG or PNG file, if needed? Well, yes, but as Geronimo explains:
“These are made up of a bunch of pixels that would only look best at their original sizes. If you try to adjust JPG or PNG, the image can end up blurry or with colors distorted.”
Here are the logo sizes for print that Geronimo recommends for some popular merchandise items:
- Shirts and hoodies: 11" wide max on front. “If you go bigger than that, the artwork could run into the armpits on some of the smaller sizes,” Geronimo says.
- Mugs: Max imprint area is usually 2.5“ x 2.5”
- Hats: No taller than 2.25"
Hot tip: Be sure to ask your printer for their preferred logo size and file format, as they may have a different preference from what’s listed here.
Logo Sizes for Mobile Apps
iOS, iPadOS, macOS, visionOS, and watchOS: App Store Guidelines
Recommended app icon upload size: 1024 x 1024 pixels
File type: PNG
tvOS
Recommended app icon upload size: 1280 x 768 pixels
File type: PNG
According to Apple documentation, after you upload the app icon at the recommended size above, the App Store will automatically scale it down for you to make the right sizes for other instances where it will show up.
Android: Google Play Store Guidelines
Recommended app icon upload size: 512 x 512 pixels
File type: PNG
Hot tip: While the full size of the Android app icon is 512px x 512px, Google Play automatically applies a rounded edge.
This means that, ideally, you should keep essential parts of your app icon within the keylines of 384px x 384px to ensure parts of your logo don’t get cut off.
Logo Size: More Important (and Complex) Than You Might Think
Phew! I hope we both learned that a logo holds a lot of influence, and it's not as simple as finding the “standard logo size” and using it across all assets.
While this blog post is a great guide, be sure to test different logo sizes yourself. When in doubt, ask your design team (if you have one). I learned from researching and writing this article that they‘re usually more than happy to help.
In fact, that’s the advice I got from another HubSpot designer I interviewed.
“I recommend working with the company design team to understand the design guidelines and the dos and don'ts of using the logo,” shares Kaiqi Zhu, a HubSpot UX designer. “I also recommend creating a long-term relationship with the design team.”
This article was written by a human, but our team uses AI in our editorial process. Check out our full disclosure to learn more about how we use AI.
Free Website Design Inspiration Guide
77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You
- Agency Pages
- Ecommerce Pages
- Tech Company Pages
- And More!
Download Free
All fields are required.
![Copyright Notice Examples: How to Write One for Your Website [+Template]](https://knowledge.hubspot.com/hubfs/copyright-notice-1-20241010-1359425.webp)
![Website Monetization Basics [+ 7 Expert Strategies for Success]](https://knowledge.hubspot.com/hubfs/website-monetization-1-20241007-9297556.webp)