How big should my website logo be?

How big should my website logo be?

Logos can give instant recognition and re-assure visitors of a websites authenticity. Upon noticing your logo a visitors experience can instantly change based on previous interaction with your business.

But balancing the impact of your logo on a web page can be a challenging task and it makes me wonder, how does everyone else do it?

Implementation

Background banner represents websites using a banner image containing the logo
  • Image (55)
  • Background (29)
  • Sprite (20)
  • Data URI (4)
  • Background banner (2)
  • Font (2)
  • Flash (1)

File Formats

  • webp
  • swf
  • jpg
  • jpg
  • font
  • font
  • svg
  • svg
  • svg
  • svg
  • gif
  • gif
  • gif
  • gif
  • gif
  • gif
  • gif
  • gif
  • gif
  • gif
  • gif
  • gif
  • gif
  • gif
  • gif
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png
  • png

Logo Dimensions

Overlapping outlines of all 113 logos using their original display size, wider logos may be cut off.

Average logo size

168px * 54px

  • Range of widths: 24px - 580px
  • Range of heights: 16px - 166px

Interesting Stats

The filename

  • 16 logos were named "logo"
  • 2 logos were named "sprite"
  • 26 logos contain their organisation name
  • 57 logos contain the word "logo"
  • 34 logos are made up of non-related words and/or characters

Other stats

  • 33 logos require placement on a coloured background to be fully visible
  • 8 logos contain no words
  • 29 logos contain only black, white and shades of grey
  • 91.15% of logos are less than 100px in height
  • 88% of logos are less than 250px in width

The logos

Note. Some logos have been reduced in size to fit the display grid. Light, white and transparent logos have had a background colour added matching their live environment, enable labels with the `show labels` button to see the hex code for these logos.

  • 33
  • Adidas (UK)Adidas (UK)
  • Adobe Systems IncorporatedAdobe Systems Incorporated
  • Alibaba.comAlibaba.com
  • AlipayAlipay
  • AmazonAmazon
  • AnswersAnswers
  • Aol (UK)Aol (UK) #000000
  • Apple Inc.Apple Inc.
  • ArgosArgos
  • ASDAASDA #78be20
  • AskAsk
  • BaiduBaidu
  • Bank of AmericaBank of America
  • BasecampBasecamp
  • BBC OnlineBBC Online
  • BeboBebo
  • Bing.comBing.com #333333
  • Booking.comBooking.com #003580
  • BT (home)BT (home)
  • Cartoon NetworkCartoon Network
  • Cineworld CinemaCineworld Cinema #2c282b
  • citysocializercitysocializer
  • CNET.comCNET.com
  • CNN Interactive (International)CNN Interactive (International) #920000
  • Coco ChanelCoco Chanel #000000
  • Dailymotion (US)Dailymotion (US) #00577f
  • DeliciousDelicious
  • DeviantARTDeviantART #54675a
  • DiggDigg
  • Domino's Pizza (UK)Domino's Pizza (UK)
  • Dorothy PerkinsDorothy Perkins
  • DropboxDropbox
  • ebay.comebay.com
  • eHarmonyeHarmony #002e26
  • eHoweHow
  • ESPNESPN #7d0100
  • FacebookFacebook #3b5998
  • FARK.comFARK.com #555555
  • FlickrFlickr #1f1f1f
  • Ford (UK)Ford (UK)
  • friendsterfriendster
  • GitHubGitHub
  • Go DaddyGo Daddy
  • GoogleGoogle
  • HarrodsHarrods
  • Honda (UK)Honda (UK)
  • ImageShackImageShack
  • IMDbIMDb
  • ImgurImgur #2b2b2b
  • Intel (UK)Intel (UK) #0071c5
  • Land RoverLand Rover
  • LinkedInLinkedIn #565656
  • LuluLulu #393836
  • MailChimpMailChimp
  • Match (UK)Match (UK)
  • MeeticMeetic
  • MeetupMeetup
  • Mercedes Benz (UK)Mercedes Benz (UK) #020202
  • Microsoft CorporationMicrosoft Corporation
  • MorrisonsMorrisons
  • MSNMSN
  • MySpaceMySpace #313131
  • NeopetsNeopets
  • NetflixNetflix
  • New York TimesNew York Times
  • NextNext #191919
  • NickNick
  • NikeNike
  • NintendoNintendo
  • O2O2 #16396e
  • OdeonOdeon #007dc8
  • OrangeOrange #000000
  • Paypal (UK)Paypal (UK)
  • PhilipsPhilips
  • PhotobucketPhotobucket #252526
  • PinterestPinterest
  • Pizza Hut (UK)Pizza Hut (UK)
  • QQ.COMQQ.COM
  • RedditReddit
  • ReebokReebok #474848
  • Sainsbury'sSainsbury's
  • ShowcaseShowcase #0b1218
  • SkySky
  • SlashdotSlashdot #005454
  • SlideShareSlideShare
  • Sony (UK)Sony (UK) #000000
  • Stack OverflowStack Overflow
  • StumbleUponStumbleUpon #040302
  • Taobao.comTaobao.com
  • TESCOTESCO
  • The Daily MailThe Daily Mail
  • The Huffington PostThe Huffington Post
  • Thomas CookThomas Cook
  • ThomsonThomson
  • TKMaxxTKMaxx
  • TMALLTMALL #b20000
  • TopshopTopshop
  • TrelloTrello
  • TumblrTumblr #111717
  • twitchtwitch
  • TwitterTwitter
  • VimeoVimeo #000000
  • Virgin HolidaysVirgin Holidays
  • VodafoneVodafone
  • VubeVube
  • VueVue
  • WalmartWalmart
  • Windows LiveWindows Live
  • WUFOOWUFOO
  • Yahoo! (UK)Yahoo! (UK)
  • YelpYelp
  • YouTubeYouTube

Conclusion

Many of today's top logos are designed to stand out on clean white backgrounds, perhaps a result of the print world and brand usage across multiple paper products. But still some logos rely on dark backgrounds to draw your attention, very few use lighter background colours.

There is a near 50/50 relationship between using an image tag or background (including sprites), I feel there will be an ever growing trend towards using a sprite as businesses further push online performance. Further advancements in web technology such as rich snippets give us plenty of other ways to get our logos into search engines. Delicious has a great feature when you right click on their logo, again reducing the need to not have your logo in a sprite.

Delicious try to prevent circulation of pixelated logos by offering users a way to download high quality versions
Delicious try to prevent circulation of pixelated logos by offering users a way to download high quality versions.

PNG seems to be the overwhelming choice for clear clean logos but a few websites have already switched to SVG and web fonts, it will be interesting to see the uptake of these formats over the next 12 months.

There seems to be little convention when it comes to file names but variation in size is much smaller than I had anticipated. Only 6.77% of logos are more than 100px in height and 12% are more than 250px in width. Interestingly, no logo matches the average height or width exactly but the o2 logo is only 8px larger when it comes to the total occupied area.

Don't be afraid to break the norm and experiment with new ideas, after all that is the purpose of creativity. This article is designed to offer accurate statistics for discussion, it was not written to restrict you or set non-existent rules.