April 4, 2011

In the last few years more and more of my web design clients have been asking me to add “that little logo in the address bar” on their websites. That “little logo” is called a favicon and is used more widely now than ever before on recent web browsers such as; Firefox, Internet Explorer and Google Chrome.

Favicon’s are actually very easy to add to a site, the difficult part is having to create your logo in such a small little 16px by 16px box. The best logos to use are obviously ones that are close to being square. As long as you are able to highlight the main part of your logo in a 64px by 64px square, you should be good to go. Most web designers are familiar with creating favicon’s for their clients, so if you’re unsure whether or not they’ll make you one just ask.

If you have to do it yourself, here are the quick and easy steps to getting it done;
1) Open Photoshop or whichever photo editing tool you use.
2) Take your logo (or a certain aspect of your logo) and put it into an image sized 64px by 64px.
3) Save that image as a .jpg in the highest resolution possible.
4) Go to a site like Favicon Generator and upload your saved image.
5) Save the image they create in the images folder in your websites directory.
6) Open all of the pages on your site and add the code to the header on each page.
<link rel="shortcut icon" href="images/favicon.ico">
7) Open your site in a web browser and you should be able to see the favicon you created!

If you’re still stuck, feel free to contact me and I’ll gladly help you out with your add a favicon to your website.