Creating a Favicon

On all web browsers, next to the website address, there is a spot for a small icon. Some websites will have custom icons, while others will have none.  These custom icons are known as favicon. They are used for display next to the web address, and will also be displayed in the bookmark listing with all browsers. This icon can be a nice "add-on" for any website.

Steps for Creating a Favicon

1. To create a favicon, open up any graphics editor such as Macromedia Fireworks, Photoshop Elements, etc. Favicon icons are square and should have a resolution 16x16, 32x32 or 64x64 so the template you start with should be one of those sizes. Resolution can also be 128x128, but the file limit size for a favicon is 1MB.

2. Once the design is completed, the image will need to be saved as "favicon.ico".  The "ico" stands for the icon file type.  If the graphics program cannot save the image as an ICO image, save the file as either GIF or JPG. Once the file has been save, you will need to locate the file, and rename the file to "favicon.ico".

3a. To use the custom favicon with Blogger, go to the Layout menu option, and there is a box at the top of the template labeled "Favicon". Click on "edit" and the pop-up window will open.  Click "Browse" and locate your icon image file that was just created. Click "Save" to save the icon file in the Blogger layout.

3b. To use the custom favicon with a custom website, the favicon.ico file will need to be uploaded to the root directory on the website's web server using an FTP program.

4. Your custom favicon should show up immediately in your browser window after you reload your blog or custom website. If it does not show up, try refreshing your browser's cache and that should do the trick.