Favicons … those funny little images you find in browsers
ByWhat’s a favicon?
Take a look in your browser bar, on the top left hand side of your screen.
Hopefully, next to the URL of this page, you should see a tiny icon, coloured light blue and dark blue, with the words IT Chat written clearly … like this in fact:
That’s called a favicon, and all the best websites use them … they’re great for branding, website identification and website customisation.
They’re very easy to make, but ironically, unless you know what they’re called in the first place, you can’t really go about finding how to make them.
I’ve used them across all of my other websites:
http://big-group-cottages.co.uk
Very pretty, but how do you make them?
They look so simple, but I had to scratch around quite a bit to solve this problem when I first started using favicons.
They are square images 16 pixels x 16 pixels in size, and they’re always placed in the highest level of your website … so basically the same place that your homepage/main index page lives.
It’s always labelled as favicon.ico … and therein lies the next problem.
There aren’t that many bits of kit that will let you save images with the .ico filename extension.
Worry not, there’s usually a freebie out there that can help.
This time it’s in the from of Irfanview, some fantastic free image processing software which allows you to save images with that essential .ico extension.
Simply take a suitable image, crop it to 16×16 pixels, then save it as favicon.ico
Upload it to your site and it will appear next to your URL in the browser window.
Often, the images take a while to appear. If you’re impatient, clear our your brower cache and that should do the job.
Finding the right words
What if it’s words you’re after, like I’ve used for this blog?
Well, I stumbled across across a very useful site only the other day, and it was just what I wanted:
To be honest with you, there are many favicon websites out there which will allow you to go as deep into the matter as you wish.
Here are couple of the clearer and more accessible ones that I’ve found:
http://www.thesitewizard.com/archive/favicon.shtml
http://tools.dynamicdrive.com/favicon/
And finally, as I’ve been reading up on the topic for this post, I’ve finally found out how to make the 32×32 pixel favicons which sit on your desktop when you save a URL … back to work then!
Your Turn: Do you have any advice you would like to share? What tips would you like to add? Please comment below.
Facebook comments:
