Website Logo: Horizontal logo vs Square Logo Design | Pros and Cons
Avoid creating a vertical or square logo for your website; opt for a horizontal design instead. Square logos may not align well in website headers. Conversely, horizontal website logos typically translate well onto physical products too.
→ Watch Video Tutorial below.
Why Square Logos are Popular?
Vertical logos were common before the popularity of websites.
So, why vertical or square logos are still popular?
In my perception, inexperienced business owners demand a square logo, by riding the old tide. I have come across websites of some logo design companies – showcasing square and vertical logos for customers but using horizontal flat logo on their own website. [RD]
Horizontal logo comparison with square and vertical logo
Icon should not be above the logo text. For example, Wondershare website logo icon is above the logo text
Why Square or Vertical Logos are Bad?
Websites are different from shirts, mugs and physical products. A webpage has limited space for logo or header because the page also displays other content to read whereas a shirt (or other product) has vast space for a logo. For using square logo on website, you only have two options; either display very small dwarfed logo like that of Apple or you must create large awkward header for larger display of logo like that of McDonald’s – and both options are bad for website design.
This is the reason that GoDaddy cautions that if the height of your logo has more 104 pixels, it will awkwardly overhang navigation bar. [RD].
The rendered heights of headers on my 1920x1080 px computer for websites with SQUARE logos are as following.
McDonald – 130 px.
General Motors – 115 px.
Verizon – 120 px.
Pringles – 88 px. It has vertical logo with intrinsic size of 400 x 511 px.
Whereas the rendered heights for some websites with horizontal logos are; Microsoft 54px, Google Meet 48px, Pizza Hut 63px, and the header height of YouTube TV is 64 pixels.
Now you can easily conclude that site headers of websites with square or vertical logos have extra height.
Therefore, I will humbly suggest that McDonald’s should include wordmark with ‘M’ icon to create a horizontal logo for website similar to horizontal logos of Pizza Hut (160x46px) or Subway (152 x 44 px).
A standalone square logo icon in website header looks smaller and less visible and if you enlarge it, you must increase the header height which looks odd and unnecessarily takes the extra space on a webpage.
You can open websites of McDonald, Microsoft and Pizza Hut side by side in browser tabs and look one by one. You will find that the elements in header region of Microsoft and Pizza Hut (both having horizontal logos) are well symmetrical and proportionally balanced than that of McDonald – and main culprit is their square logo.
Utilizing Different Logo Versions: Horizontal Logo on Website vs. Square Logo on Products
Some companies are wisely using separate horizontal logos for website – but at the same time also using Square version of the logo where appropriate.
Here, I will support the point with examples from two brands – Volvo and Domino’s.
Example of Volvo
Volvo is manufacturer of cars, buses, and trucks. Volvo has two logos and each is used according to situations in different settings.
Text-only wordmark logo of VOLVO is used on website. It has horizontal design – its rendered size on my 1920 x 1080 monitor is 98 x 8 px but its intrinsic or original size is 1266 x 98 pixels. It is in SVG format.
The second logo of VOLVO is square – though it appears rounded. Square logo of Volvo is 400 x 400 pixels and in JPG and PNG formats on different social media pages. Volvo Square logo consists of the same word mark (used on website) and iconic symbol. [RD]
Volvo uses Square logo as profile image on their Twitter and Facebook accounts.
Volvo square logo is also used on merch items of brand such as shirts, jackets. [RD]
Square logo is used on front of Volvo cars, however, on rear of cars the wordmark horizontal logo is used. [RD]
Volvo horizontal logo is also used on outside of company buildings. [RD]
However, for inside of Volvo buildings, mostly square logo is used. [RD]
In 2021, Volvo has made modifications in the square logo making it flat and simplified. [RD]
Please note that some other brands also follow same policy of using wordmark logo on websites but using icon logos on products. For example;
Popular car manufacturer, Toyota uses horizontal logo (logotype) as brand logo both for website as well as Toyota Twitter account.
Honda also uses only text-based horizontal logo on website.
Example of Dominos Pizza
Dominos is another example, which realized that horizontal logo is better option for website.
Logo on the international Domino’s Pizza website (registered in 1994) site uses only square icon in 100x100px.
However, apparently, Dominos have learned from their mistake. On official Australian Dominos site, it uses horizontal logo (150x70 px) where icon and text (logotype) becomes the part of logo.
However, on Twitter account Domino’s only uses official square logo (400x400px) – not its wordmark similar to as volvo does.
On most buildings of Dominos, they display horizontal logo consisting of both logotype and icon. [RD]
Similarly, YouTube TV displays horizontal logo on website but uses only icon with ‘TV’ text in square logo for YouTube TV Twitter account.
In nutshell, it is a better choice to use a horizontal logo for website.
More Resources
You may also be interested to learn about the Ideal Size for Website Logo in another Dozro article.
Read Dozro article about ideal design and size for Favicon of your website.
Examples of Unique Logo Design using a Single Font that is Readable.
Ideal Position of Brand Icon in Logo – Left, Right or above the Logo Text?
FAVICON Design Ideas and Examples.
Transparent Logo vs Logo on a Background Shape – which is better?
Website Logo Best Image Format – PNG, JPG, SVG?
Text only Logo vs Graphic Icon Logo – which is better?
Logo Design Tips, Ideas and Examples.
Check our service Charges for a Unique Logo Design.
Check our guide for optimal Facebook cover size.
Learn more Website Creation and Web Design Tips.
Discover Dozro Services or check out the Home page of our website for additional learning resources.
