With everchanging mobile and desktop sizes, ensuring a seamless viewing experience across mobile, laptops and other devices, it is key to ensure certain aspects of the website developments are locked in. This is why the logo size and its aspect ratio on the menu are kept as standard across all sites to ensure clear visibility across devices. This is the best practice that is followed as global standards. Additionally, enabling this may cause the website to look shabby.
Note: Listed below is the size of the logo that can be used on your site
- Height - 100 px
- Width - Is auto-adjusted automatically.
In case the logo size is to be increased, it would break the proportions of the menu bar due to the different screen sizes of the site visitors. However, here are some ways to ensure proper visibility of the logo on your website and home page:
Upload A Horizontal Logo
Every logo needs to have multiple versions to be able to fit in at all displays as mentioned here: https://stephcorrigan.com/logo-variations and an ideal shape for a logo is a horizontal rectangle. A horizontal logo can be used on your website, corporate invoice and stationary or online and in print where the vertical logo doesn’t fit.
You can have a look at all the themes on the below link and see that all logos are horizontal: https://www.squarespace.com/templates.
You can also refer to various articles to understand the importance behind horizontal logos, here's one for your reference: https://medium.com/unfoldco/how-to-create-a-well-balanced-vertical-logo-dcb2064c1bfb
Hence, in order to ensure the logo appears clearly, please upload a horizontal logo by keeping the logo text towards the right or left and an icon on the other side.
Increase Logo Width
One way of achieving this clarity in visibility is by reworking the logo.
List the name of the company/ business next to the motif (design element). As shown in the image, when the text is boldly written in large or bold font size on the right side of the motif, the visibility is much better.
Add a prominent logo in the banner section
Another way of highlighting the logo prominently on the site used by many is to add the logo in the banner section as shown above.
This clearly highlights the logo and you can even list a promise statement under the logo or add other content as the need be.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article