Until today I didn’t know what the little icons next to the names of web tabs were called. I just knew they looked cool. They add a professional touch to a site by introducing branding and colour to the most basic part of the page – the tab. After a little searching I found their name: favicons. They are a great way to add identity to your website.
A browser tab bar with favicons. Even when the name is obscured you can see which is which.
The ‘site identity’ pane in wordpress.
This site runs on WordPress, which is a flexible content management system. This makes it easy to add a fasvicon. Login with a user that has administrative rights and click on ‘Appearance > Customize > Site identity”.
This allows you to add a file. Note that the minimum size is 512 x 512 pixels, which is quite a bit larger than the traditional favicon size of 16 x 16 pixels. So all I needed was an image that says, “St33v.com”. Perhaps a capital S would suit for the time being.
Afterall, it worked alright for Superman.
A super logo made from a capital S.
So I took the plunge and learnt how to create my own favicons. I knew this would be a good opportunity to use GIMP, but because I find its interface daunting, I followed a video guide by Mr Fixit.
Capital S
I made a few adjustments to the recipe, such as:
- I made the image 512 x 512 pixels, since this a WordPress site.
- Before flattening the image I saved it in native GIMP format. This means I can edit it if – or should I say ‘when’ – I decide on a colour scheme that it not too close to one that has already been taken.
You can see the result of my efforts on the left. Not too bad.
However, my teenage style advisor walked past and remarked that it looked, “a bit Optussy”. She might have a point. Here is the yellow ‘ollie’ icon:
A more saturated yellow and more-teal than blue.
Comparing the colours side by side shows that they are slightly different. I like my pastel-like tints.
