Favicon

The Carlyle Gardens Computer Club needs a better favicon for its web site. A favicon is the little graphic that appears in your web browser when you access a web site. If you save a web site location as a favourite or a bookmark, the favicon is usually shown as part of the bookmark.

Why Do We Need a Favicon?

Modern web browsers automatically look for a favicon, whenever they visit a web site. If a web site does not provide a favicon, then the web server program will record that there was a failed attempt to view a file. This failure is recorded as a problem in the web site error logs. It is a good idea to keep the web site error logs clear of spurious errors, so that we can more easily identify real attempts to find a missing web page.

Why Would We Want a Favicon?

It assists in identifying a web site, by appearing in the address bar of a web browser, or in a bookmark or favourite list.

Design Tips

A favicon is a tiny little logo, which originally was only a 16 x 16 pixel square.

I find it really hard to do a good job of making an attractive icon that small. Luckily these days you can actually use somewhat more pixels, as computer displays are better, and the rules have changed.

Web site designers have rules of thumb about design. The BBC's Mick Ruddy gives four tips:

  1. Keep it simple - use basic shapes
  2. Use a limited colour palette
  3. Avoid fine detail or lots of gradients
  4. Keep it sharp - avoid blurring

Colours

Carlyle Gardens Computer Club does not really have club colours, as far as I know. However Carlyle Gardens Retirement Resort is in Townsville, near the stadium. So I decided I would use the club colours of the North Queensland Cowboys rugby league team.

The Cowboys mostly use navy and yellow. However which blue and which yellow?

Identifying a Colour

Apple DigitalColor Meter

Since I use an Apple Macintosh computer, I was able to take advantage of the built in DigitalColor Meter. This is a little Utility program included in the Apple OS X operating system. If you hover its cursor over any part of your display, it will tell you which colour you are viewing. It tells you the colour in terms of how much of the three additive primary colours red, green and blue it contains. This is handy, because when we specify a colour on a web site, we do so in our cascading style sheet in terms of how much red, green and blue (or rgb) to use.

DigitalColor Meter told me the navy the Cowboys used on their web site was actually 43 parts green and 92 parts blue. The yellow the Cowboys use was 249 parts red, 4 parts green, and 22 parts blue.

Hang on, I hear you say. How many parts can each colour have? They can range from 0 to 255, a total of 256 levels. Why 256 levels, you ask? Because two to the eighth power equals 256, which matches how computer memory is designed (I might explain that sometime, but you will be sorry I did).

However even more important for our rgb web colours, we often do not specify colours in terms of familiar decimal numbers. We specify them in hexadecimal, or in base 16. This is just like our familiar numbers, if you have 16 fingers. Since we can only use numbers from 0 to 9, after that we start using the letters a to f. So what we think of a 10 is A, 11 is B, 12 is C, 13 is D, 14 is E, and 15 is F. So our 0 to 255 range expressed in hexadecimal is 00 to FF. It all neatly fits in two hexadecimal numerals. Boy, I am sorry I did that question.

Luckily we can get DigitalColor Meter to do this hexadecimal conversion for us. The Cowboys navy is 00 for red, 2B for green, and 5C for blue. Is this 2B green really the same as the 43 green I listed a few paragraphs ago? Sure. 2 times 16 is 32, and B is worth 11, so that makes 43. To identify a number as hexadecimal we can write it either as 0x2B, or as #2B.

The Cowboys yellow, as rgb, in hexadecimal, is F9 D6 16. We will put this yellow in our cascading style sheet as #F9D616. The navy colour will be #002B5C. We use these same numbers to select colours for our favicon.

A 16x16 Design

Text to come