How to Create Favicons by Converting Existing Images

A favicon, or “favorites icon” is a 16X16 pixel image shown in most browsers just to the left of the URL for a particular site you are visiting. It is an important part of the overall branding of a site, especially if your visitor happens to bookmark your site. If your favicon is memorable and follows the branding of your product and site in its design, it can become an easily recognized symbol of your product or service.

Favicons are simple to create, even online. You don’t need special software and you don’t need to be an overly creative type. Several websites enable you to either create your image one pixel at a time, and others automatically convert an image you upload to the proper format to use as your site’s favicon.

Dynamic Drive (Dynamic Drive- FavIcon Generator) has a very simple favorite icon generator. Simply upload a desired image in the top right corner of this page, and submit the form. A small sample of what your favicon looks like will appear below the form, as well as a download link. Click the download link and save the image to your web server. For simplicity’s sake, favicons are normally found in the root directory of the site, but can be located anywhere in your directory structure that is accessible to the web.

Edit the of your html document to include the tag below, which tells the browser where to find the file you just created:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

That is all you have to do! By placing the above tag on your site’s index or “home” page, most browsers will associate the favicon with every page on your site. Remember, if you place the image in a location other that your root, you will have to edit the href attribute of the above tag.