1. bluehost knowledge base

How To Edit My Address Bar Icon Or Favicon.ico?

Overview

A "Fav Icon" or favicon is a bookmarkable icon that is a square in design that resembles your website. These web icons can be 16x16 up to 64x64. Most web designers will include a favicon.ico image when designing a site.

Any paint program will allow the creation of a favicon. A google search will show many favicon creation tools. One popular site is http://www.favicon.cc/.

Note: For addon domains, please place a favicon.ico file in the directory for the addon domain.



Adding a Favicon to your Website

Step 1 - Find an Image

  • Most websites use a smaller version of their logo or similar.

The main consideration is to keep your icon simple and clear at such a small size. Most browser interfaces (the top toolbar containing the browser buttons) can display 256 colors, but it's best to use the Windows 16 colors.

Step 2 - Convert the Picture to an Icon

Step 3 - Including the icon in your web pages

  1. Publish the icon into the root directory of your website. This is the location Internet Explorer will automatically look for your favicon when a visitor bookmarks your site.
  2. Help the browser find your icon by including in the html, within the <head> tag, the following:
    <link rel="icon" href="http://www.your-web-site-name.com/favicon.ico">
    Place this nearer the closing </head> tag because more important information should come earlier, such as your meta tags.
  3. Save your web page and publish it.

If you want to create different icons for different pages, simply call them something other than favicon.ico but still retaining the .ico suffix. Link to them in your pages in the same way as above, just changing the href location for the different icons.

Step 4 - Testing your Icon

  1. Open Internet Explorer (version 5 or above) and bookmark your page.
  2. Determine if your icon stands out from other bookmarked websites with favorites icons.
  3. If necessary, re-edit your icon and publish it again.
  4. Close your browser and re-open it. Bookmark your page again to check the new version of your icon.
  5. Repeat until you're satisfied your icon is suitably eye-catching.

Common Issues

When browsing in Internet Explorer, my favicon.ico doesn't load.

There are a few solutions to this problem:

  • Add the page to your favorites. If you already have the page in your favorites folder, remove it and add it again.
  • Make sure the icon file is called favicon.ico, and it is placed in the root folder of your web server.
  • Make sure the path to the favicon in the header of your page is absolute, not relative.
  • Delete your temporary Internet files. If the folder with temporary files has reached its maximum, the favicon may not be used.

For more information, you may visit How to make a fav-icon?.

For further assistance, you may contact our Chat Support or Phone Support via 888-401-4678. You may also refer to our Knowledge Base articles to help answer common questions and guide you through various setup, configuration, and troubleshooting steps.