Setting Up a Website favicon

How to add a favicon.ico in the browser address bar

Sticky Note Free Scripts
Support for creating, and adding a favicon.ico address bar icon to any website. Allows for a custom icon to be displayed in a user's bookmarks when your website is added to their browser favorites.

See Also…

What is a favicon.ico
Internet Explorer, Firefox, Safari, Opera, Google Chrome and most other web 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 uploaded to your website, the icon will be displayed beside your website name in the "Favorites" menu and may also be displayed in the browser address bar. When a user opens their "Favorites" folder, your favicon.ico will link to your website.

favicon shown in Google Chrome

How to create the icon
Create a small .jpg image that is 16 x 16 pixels. Optionally also create 32 x 32 and 48 x 48 .jpg images as well. The larger images allow for your website address to be dragged to the user's desktop. It's best to make the 48 x 48 first, then re-size to the smaller sizes.

You'll need icon editing software to create, and/or convert your .jpg images to the favicon.ico. Most icon editing software allows you to add the 3 sizes as indicated above into a single icon file. Save the image and name it "favicon.ico".

Icon Editing Software:

On-line favicon generators:

The 16 x 16 is for the browser address bar and bookmarks, the 32 x 32 and 48 x 48 are for when a user "drags" your bookmark to their desktop.

Tip: If you are using downloaded software: In your icon editing software use "import" to use your existing .jpg images, or in some cases you can have your graphics program open at the same time as your icon editor and copy and paste between the two programs.

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 offered on some websites is not required, however, for other options, check out "How to Add a Favicon to your Site" at W3C. In some cases it may require you refresh your browser, clear you cache and sometimes even a computer reboot is needed before you'll see the icon update in your browser.

Responsive and Mobile Layouts

TROUBLESHOOTING: favicon.ico did not work
Here are some possible problems you may encounter and some solutions.
  • Check if your icon is working off-line in your computer folder. You should see the icon even in "list" or "details" view inside the folder.
  • In Internet Explorer 6.0 and up, it's 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 a different web browser like Firefox or Chrome, 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, or re-create your "favicon.ico" file.
  • You may need to try other icon editing or creation software.
  • Be sure your file is named "favicon.ico" and is uploaded to the hosting root folder.
  • Did you upload in the correct FTP mode?

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