The Use of Logos in Web Design

by Tom Kenny (@tkenny)

Logos are the single biggest representation of a brand. They are used across multiple forms of media as well as by and affiliates or any advertisements that are used to promote the brand and of course they’re used on websites too.

The use of logos on websites doesn’t have to follow the standard conventions as we’ll see in some of the examples below.Positioning

The standard convention of logo placement on websites is in the top left area of the page. The reason why it is so common is exactly that. Placing it in the upper left is familiar to users so you won’t see too many exceptions to this rule. Having said that, it is perfectly fine to bend this rule as you will see in some of the examples below. However you will have a hard time finding a website that doesn’t include their logo in the header in some form or another.


The recent redesign of CNN sees the logo move to the center of the page. It works well as it is in a dominant position on the page, promoting the brand and becoming very memorable in the process. It is also slightly unconventional to the standard top-left positioning but perfectly acceptable as it remains in the header area at the top of the page.



Placing the logo to the right of the header area is the rarest of positions in web design but can be executed well. See the example below on duoh! Sufficient whitespace surrounds the logo in order for it to stand out on the right hand side of the page and still be clear and easy to see the name of the website.


Additional Locations

As well as having the logo in the header it is also fairly common to place the location in other locations on the page such as in the sidebar or in the footer to reinforce the brand. As users scroll away from the top of the page it can be a good idea to include another version of the logo elsewhere on the page to do this.


Pdstuts+ understand the importance of a footer, so much so that they even include their logo in the footer.



Gowalla uses their mascot icon in the sidebar of their homepage as well as in the footer of their site.



Logo size isn’t always as important as is thought but it can be used in effective ways other than just displaying the name of the company or website. The two examples below show how both big and small logos can be utilised appropriately.

Bullet PR

Bullet PR use a big version of their logo to make it the starting point of the design. The line beneath it guides you around the content on the page and begins just after the logo.



Palm include a relatively small logo on their website but it isn’t necessary for it to be any bigger as the company name and logo is always used in the names of their products which are displayed throughout their site in multiple locations.


Clever Tricks

With the internet being an interactive form of media it is possible to be creative with how a logo behaves depending on how a user interacts with it.


Scrolling down on Econsultancy’s blog reveals an alternative coloured logo that appears to transform from from the red logo, underneath the header area. It’s a nice effect that keeps the logo in view at all times.


Max Voltar

Tim Van Damme’s blog, Max Voltar, uses a similar effect to the one above. As you scroll down the page  and the main logos disappears out of view, another logo appears in the sidebar from underneath the header so it is always visible.


Web Designer Depot

As you hover over the Web Designer Depot logo, a tooltip appears beneath to indicate that the clicking it links back to the homepage. Its common understanding that clicking a logo on a website takes you through to the homepage but it is helpful indication for anyone who may not be aware of this themselves.



Amazon use the same technique as above but use CSS sprite to display a different image, with the included ‘homepage’ text, when you hover over their logo. It also turns into a something more resembling button, giving that extra indication that it is clickable. Also note this doesn’t happen on the homepage where it is unnecessary, only on sub pages.


Elliot Jay Stocks

A similar method is used by Elliot Jay Stocks on his personal site but instead of using a CSS sprite he simply makes use of a span tag that contains the word ‘Home’ which appears below the logo when hovered over. There is even an :active pseudo-class that darkens the ‘Home’ text when the logo is clicked.


Get Creative

Hopefully this will encourage you to get creative with logos in your future designs. If you have come across any other creative uses of logos, please share them in the comments below. Especially anything that can be added to the clever tricks section.

Design Inspiration from the World's Best Designers

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

I’m a freelance web designer and front-end developer with over 7 years of experience designing for the web. Follow me on Twitter here.