Articles on Website logos and icons

A favicon is a small graphic that appears by your web page address in a visitor’s browser, or in their bookmarks list, and helps to identify your site. As such it is a very important piece of web real estate, and contributes strongly to your online brand image. Being only 16 by 16 pixels in size, however, there is quite an art to getting a meaningful design into a ‘favicon’.

For most of us, one favicon is enough, and we would not want to re-brand this part of our identity any more often than we have to, as this may confuse visitors! For a complex brand like Google’s, however, changing the favicon has been a common event over the last eighteen months, culminating in the latest, a stained glass ‘g’. Where will Google go from here – does the new icon more accurately reflect their core brand? Or is the Google ‘spirit of innovation’ simply incompatible with a fixed brand image?

The image (above right) shows a 16 by 16 icon expaned 10 fold. The original icon held the word ‘icon’, and now appears in the dot of the ‘i’!

For more on the Google favicon, and an opportunity to have a go at designing your own favicon, see the BBC Magazine article linked below:

BBC: What’s with Google’s new mini icon?

Previous post on favicon design

Returning visitors are important to most websites, so helping them find the bookmark they make to your site is only sensible. After all, your competitors only gets a look-in when they re-do the search! The bookmark icon is an important visual cue for links in the bookmark folder. Bookmark icons are always simple by necessity, as the artwork is constrained to a 16 by 16 pixel square. We will normally create a bookmark icon for a website as part of the development process, where possible this is based on the site logo (whether or not we have developed that component), but occasionally we need to take a tangential approach to design to get something that is memorable, related to the site, and possible to render at the required resolution! A few examples of our work are shown above.

The logo for OMEC (the Organic Materials in Electronics Consortium) reflects the role of the consortium, which is to develop organic, carbon based alternatives to metal and silicon circuitry used currently in the electronics industry. It is in the form of a printed circuit board, which is duplicated symmetrically above and below the acronym.

The acronym ‘OMEC’ has an antique meso-american sound – similar to ‘Aztec’ and ‘Toltec’ – and we have played to this in the design and font choice (Miandra). The printed circuit boards bear some resemblance to the feathered crowns that used to be worn by the rulers of these countries!

The OMEC logo was created in March 2006

The Polymer IRC logo consisted of the letters IRC (Interdisciplinary Research Centre) in a jigsaw piece. The design works at two principle levels: Polymers are made up of pieces (monomers) stuck together in a modular manner to form large macromolecules. In addition, the IRC itself is an interconnected group of specialist research schools…

We had a slight hiccup with the development when our research showed that the Faraday Packaging partnership – a group in a related area of business – had used a similar concept in some of their publicity material (discovered in searches through Google). Whilst the concepts were similar, the two designs were, however very different, so there would be no possibility of mis-identification. As a consequence we recommended this design to our client, and it has gone on to be a very successful brand. Studies by third parties have shown this to be one of the most instantly recognisable and identifiable logos in its field.

The logo is reinforced by images and movies on the site, which also make use of the jigsaw metaphor.

The IRC logo was designed in August 2004

The design was to identify a proposed new centre for regenerative medicine, to be hosted jointly by the Universities of Durham and Newcastle. We evaluated a range of possible logo designs, which were discussed as roughs with our client, before developing the tail-less lizard or gocko concept. The gecko is well know for being able to loose its tail to a predator helping it make an escape, and then re-grow the tail. This animal beautifully reflects the goals of any regenerative medicine programme – to be able to regenerate tissues, limbs, teeth, internal organs – following an accident or disease.

The DTC regenerative medicine logo was created in August 2007, the draft above left dates from July 2007, while the finished version (employed in a powerpoint presentation) is shown in context below:

The White Rose Doctoral Training Centre was engaged in training research students at the physical sciences – life sciences interface. The DTC is run jointly by the Universities of Leeds and Sheffield – part of the White Rose alliance of Universities, the name drawing on the emblem of Yorkshire, where the Universities are based. This is an extremely exciting area of research, drawing on recent advances in life sciences and nanoscale and molecular level investigation techniques.

To an outsider the logo might look a bit abstract. The design does, however, draw on the formalism used in depicting protein folding. As such it is instantly recognisable to anyone in the field, while its combination into the distinctive five petal rose shape, links it firmly to the Centre. While five fold symmetry is usually taken as distinctive of the rose, a number of other common plants have it – including apples, and this can be seen in both their flowers and their fruit (cut an apple in half at right angles to the stem axis if you don’t believe me!).

The White Rose DTC logo was created in December 2006.