Make Your Website Look Official With Its Own Custom Favicon

A favicon is the little custom icon that appears in the browser tab just to the left of the page’s title. It is most often just the logo for a website shrunk down to 16 X 16 pixels. Below is an example of a site that has a favicon and one that does not.

When someone bookmarks your site, your favicon will appear with the page title in their list of bookmarks. This is an effective way to stand out and give your website a nice, professional image.

If your website doesn’t have a favicon yet, this simple guide will help you create one and explain how to display it when visitors come to your site. Even if you’re not real tech savvy, creating your own custom favicon is actually much easier than you might think.

Step 1: Create Your Image

If you already have a logo or an image that represents your site, simply open that file with an image editor like Adobe Photoshop or Fireworks. If you don’t already have such an editor on your computer, there are other options available, like pixlr.com, a great online alternative that is free to use.

If there is a lot of extra white space around your logo, be sure to crop it out. If your logo is a little more complex and does not display well as a 16 X 16 image, you may need to simplify it, or even use a different image altogether. However, if you go that route for your favicon, you should still try to incorporate the same primary colors of your website into the new image. While it is acceptable to use a different image, it is recommended that you use your logo if at all possible to help with the company’s branding efforts.

Once you reduce the image size to 16 X 16 pixels, save your file as a .jpg, .png, .gif, .bmp, or .tif.

Step 2: Convert Your Image

You now need to convert your image to a .ico file. There are several online tools that you can use to accomplish this. A good, free icon generator is available at prodraw.net. Simply upload your image, select the icon size, and voila. You can download your brand new .ico file.

Step 3: Upload Your Image

Now that you have your favicon.ico file, you can upload it to the root directory of your site. Do not place it in any folders. The image should be visible when you go to www.yourdomain/favicon.ico after uploading it (of course replacing “yourdomain” with your actual domain name). Do not place the favicon in an image folder such as: www.yourdomain/images/favicon.ico.

Step 4: Add Basic Code

Most modern browsers can detect that your favicon is present in your root directory and display it in the browser tab. While you don’t need to add any code to your pages, you will still want to add include simple code in the section of your HTML to ensure that all browsers display your favicon properly. Below is the code you’ll need to add.