Web Design Tips and Tricks

Does Your Website Need A Favicon?

Get Web Design Tips and Tricks on mps-web-design.com. Does Your Website Need A Favicon? topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.

Are there many people asking themselves, “What the hell is this bloke talking about…a “Favi…what?”

I said a FAVICON. It’s one of those little images you see to the left of the URL in the address box of your browser (at least, the IE browser anyway - where the IE logo normally appears) and more to the point, it turns up next to the URL when the website is saved into your Favorites - or Bookmarked, if that’s the term you use.

If you're still not clear, go to Google’s main search page (www.google.com) and save it to your favorites. You'll see the little (16px) square "G" logo. That's a favicon. I'm no expert but logic suggests that the name is a derivative of "Favorites Icon".

I think, as I expect does the average client, that they give your website an air of professionalism or assurance that you're a "going concern". As always, appearances are important and anything you can do to make yourself stand out against the other bloke is a plus, especially online. The good news of course, is you can have one if you have the most basic of website skills - and a website over which you have backend control.

Obviously, the first thing to do is to get an image. You can pay for an artist or graphics outfit to design and make it but most people can turn out a half decent image with the right tools. The secret is to keep it simple. Basically, it has to be simple, as its only going to be 16px square and a lot of detail is not going to show up at that size.

I use two tools that serve my purpose well. Windows Paint® program and a wonderful image editor call Irfanview®, which you can get free at their website, irfanview.com. However, if you prefer, or have another image creation and editing tool, go for it.

As I said, the secret is to keep it simple. Too much detail or too much colour in such a small image will just end up being a blur. The best way to create your image is to make it in a larger size (say... around 30 - 40 pixels) so it's easier to work with and then use your editor to reduce it later. Make sure you make it square (all sides equal).

Once you have your image in Paint®, save it as "favicon.bmp". Saving an image in anything other than bitmap in Paint® can distort the colour. Once you have the image saved, open it in Irfanview® and use "Resize/Resample" under the "Image" option on the toolbar. Then simply resize the image to 16px.

You will now see exactly what your favicon will look like, so you'll know if you tried for too much detail or colour etc. If you're happy with the image you save it as "favicon.ico". The ".ico" file extension option is a Windows® extension, which is included in Irfanview® but may not be in other editors. It has to be saved as “favicon.ico” so the IE browser will recognise it.

Having created and sized your favicon, all you need to do now is put it into your website root folder (the folder where all the web pages are). It DOESN"T go in the images folder. That's it. You have a favicon for your website and everyone thinks you're a real professional and so much better than all those other websites that don't have them...

More Articles: