Clients often ask how to customize the little logo for their website that appears in their web browser tabs, title bars and bookmark lists. This little icon is called a “favicon” and is 16 pixels by 16 pixels. Here are some familiar examples.

Some people try and create the actual 16 x 16 graphic by hand using Photoshop, but editing at that small level of detail can be difficult and you often end up with a blurry and pixelated square.

Here’s a quick and easy shortcut to creating your own custom favicon for your website or blog. Find any square graphic that you want to use as your favicon. Ideally, this graphic is a larger, detailed graphic, around 200 pixels by 200 pixels, such as our Durrani “D” graphic that we use for our logo mark, pictured here to the right. Any image you want to use is fine and can be a .jpg, .gif or .png file type.

Then just go to http://www.html-kit.com/favicon/, browse to your graphic and click the button to generate your favicon. You can even optionally animate your graphic. The generated favicon file will be a compressed ZIP file that you can download to your computer and extract.

Transfer (FTP) the favicon.ico file that you downloaded, to the root folder of your website (the main public directory). A web browser automatically looks for the favicon.ico file when it loads your website and if found, will use it instead of the Internet Explorer or Firefox default icon. Now when someone visits or bookmarks your website, your new graphic will show up as the custom icon and will give your site a unique branding to stand out from the rest.

We used the “D” graphic above to create our site favicon. Here’s what the final image now looks like in a web browser:

One quick note – web browsers typically store or “cache” these files in a temporary folder on your computer each time you visit a website, so in order to get your new favicon file to show up, you might have to close and reopen your browser and/or clear out your browser temporary internet files. You can also try pressing the CTRL key and F5 key at the same time to force the page to load from scratch and refresh the all content and images.

That’s all there is to it. So go make your website bookmark and browser tab stand out from the rest with your new custom favicon.