Web Design 101: Tips on Designing Logo

Posted on May 20, 2013

In our two previous articles on Web Design 101, we discussed a few tips on colours as well as font and typography issues. In this post we are going to share our thoughts on logo design.

web design_designing_logo
Why you need a logo for your website

One of the first things you must do when you set up your business is to have a logo. This also applies to website development. A website logo helps you brand a professional and trust-worthy image for your website. If you want your readers to come visit your website on a regular basis, a website logo is a must!


960 pixel is a common width for website layout. This is because 1024 x 768 was one of the most-often-seen monitor resolutions in the past decade. Having a 960 pixel website width gives enough spacing between the actual browser and the website.

Rule of thumb: When designing your website logo, you may consider having approximately 192 pixel width, or 1/5 of your website width.

Background Colour

Choosing a transparent background for your logo is, in general, easier for you to match with your overall website designs and colours (imagine an irregular shape of a logo with a transparent background. This will work perfectly fine with ANY colour of a website). To do so, save your logo in PNG or GIF format. But please keep in mind that GIF file only supports 8 bits per pixel. What that means is it only allows a single image to reference a palette of up to 256 distinct colours chosen from the 24-bit RGB colour space.

Website Layout

As mentioned in the beginning of this article, a business owner should have the logo BEFORE he/she actually opens the business. This also applies to website logo. You should have a website logo prior to your actual website design. So, when you design your website layout, you should keep your logo in mind and try to match the overall tone and colours of your website with the logo.

A Few Extra Tips

  1. There are thousands of free online logo creators available online. Simply search “logo maker” on Google and that should lead you to some FREE good resources
  2. Avoid blurry image with fonts that are hard to read when designing your logo. A higher resolution of the logo should solve the blurriness problem. But please keep in mind that files with large size will always slow down your website. Consider something under 300kb but with a higher pixel dimension.

Have fun designing! Stay tuned for more design tips on menu bar of a website in our next article. Share this blog post on your social media channel if you find it helpful.