Add a Favicon to Your Website in 4 Quick Steps

In most modern web browsers you have probably noticed a tiny icon that appears to the left of the URL in the address bar, in the browser tabs as well as in your bookmarks menu and toolbar. This small icon is called a Favicon or favorites icon, which can help visitors quickly identify your website and further establish your brand within a browser.

If you do not have a Favicon setup a default icon will display, such as a tiny blank page in Firefox or the browser’s logo used in Internet Explorer. The following covers 4 steps for adding a Favicon to your website which canl help personalize your site’s presence within a browser.

Step 1 – Create Your Image

With your favorite graphic editing program, such as Photoshop or Fireworks, create a small image that is 16 x 16 pixels. To make this process easier you may want to start with a canvas size of 64 x 64 pixels, then resize back to 16 x 16 when you’re satisfied.

The biggest mistake that people will make when creating their Favicon is over designing. The key is to keep the icon simple and legible so it can be easily identified by a site visitor.

Once satisfied save the image as a gif, jpg, png or bmp file.

Step 2 – Convert Your Image to an Icon

There are many tools and plug-ins out there to help you create your .ico file, however there are also plenty of sites that allow you to upload your image and convert it on the fly. Here’s one example of such a site:

http://tools.dynamicdrive.com/favicon/

Just upload your image, select the button to create your icon then download the .ico file for use as your Favicon. Note: Ensure you name the file favicon.ico when you save it.

Step 3 – Upload Your Icon

Next you simply need to connect to your sever and upload the Favicon.ico file to your site. When doing so you’ll want to place the file in the root directory of your site – this is usually the location of your index (home) page. As long as you have added the favicon.ico file to your root directory most browsers will automatically detect the file.

To be safe, you may want to add a direct link to this file in the section of each page on your site to ensure the browsers recognize and display your icon.

This line of code should look something like this: <link rel=”Shortcut Icon” href=”/favicon.ico”>

Once you have added it to these pages simply upload each page to your server.

Step 4: Test

Your Favicon should automatically display with a simple refresh of your pages in a browser, however if it doesn’t display simply clear your cache and refresh once again – that’s it!