Favicon Address Bar Icon in Website Templates

Setting Up Your Own favicon.ico

If you would like to setup your template on your website so when it is added to the "favorites" or bookmarked your own personal image appears in the user's browser links, you can create your own favicon.ico and upload this to your hosting area.

What is a favicon.ico:
Internet Explorer ("IE") 5.0 and above, Firefox, Netscape, Safari, Google Chrome and most other browsers include a facility where, if someone bookmarks, or adds your site to their "Favorites" menu, it associates a particular icon with your website in the bookmark. If a "favicon.ico" file is available at your site, the icon will be displayed beside your website name in the "Favorites" menu as well as the location bar in IE. If the user opens up the "Favorites" folder, it will be the icon used for the link to your site.

favicon shown in IE 7.0

How to Create the Icon
You will want to create a small image that is 16 x 16 and optionally a 32 x 32 pixel image as well. You will want to use an icon editor to create, or convert your image to the favicon.ico. See the links below for some editor/converter choices. Or, see the links below for free favicons that have already been created.

Most icon editors like IconEdit, and Microangelo, allow you to place both of these images in one icon file. The 16 x 16 is for the browser links and the 32 x 32 is for when a user "drags" your bookmark to their Windows desktop. Save the image and name it "favicon.ico".

On-line favicon generators

HTML-Kit - FavIcon from Pics
Dynamic Drive - FavIcon Generator

Where to put the favicon.ico
To make this all work, simply upload the "favicon.ico" to the root directory of your hosting area. That's all there is to it. The HTML code indicated on some websites is not required, however, you can also check out "How to Add a Favicon to your Site" at W3C.

Responsive and Mobile Website Design

If the favicon.ico did not work
Here are some possible problems you may encounter and some solutions.
  • In IE 6.0 and up, it is possible that you may not see your favicon right away. IE can be a bit buggy, however, your icon is probably working. Try testing your site in Firefox, or, emptying your browser cache, rebooting your computer and then testing in IE.
  • Try testing in Firefox. If your favicon works in this browser then it is properly setup.
  • Try adding your site to your favorites.
  • You may need to try another "favicon.ico" file.
  • You may need to try other icon editing or creation software.
  • Be sure your file is named "favicon.ico".

Related Links:
Wikipedia Favicon
Clickfire Favicon Tutorial
How to Add a Favicon to your Site at W3C
Free Favicon Converter
Free Favicon Generation
Icon Suite Free icon editor.
PixelToolbox Free icon and graphics editor.
IconEdit32 This is the editor Allwebco uses for our favicon. From PC Magazine.

Free Royalty Free Favicons
Free Favicon
Clickfire favicons

Allwebco Favicon Support

Allwebco Favicon Support

Website Template Support
Website Template Support