Answers the question: How do I add my logo to a browser’s address bar?

It’s been awhile since I first installed Mozilla Firefox. One of the things I noticed was a fancy logo next to the address bar in the browser. Then with tabbed browsing I saw a logo for each web site. Microsoft added this ability when it introduced Internet Explorer 5.5. Now with IE7 you can see the logos in tabbed browsing as well. Here’s how you can place your logo next to the address bar. It will also show up when someone bookmark’s your site or adds it as one of their favorites.

I should clear up that the logos are referred to as favicons and it’s full file name is normally favicon.ico. Click here for Troubleshooting tips for favicons

Unique ID Favicon

Our favicon

First create a favicon

Here are a few places to create favicons for free. You will need the image that you like to show up in the address bar. Make sure to name the file favicon.ico

After you have created the favicon, download it to your computer and follow the next steps.

Next upload the favicon

The best place upload the .ico file is in the root directory of your web site. In most cases this is the same place where your index file is.

Finally, link your favicon.ico file

Link this on every page of your website. If you have a header file (header.php or header.asp etc.) then this will just take a few seconds.

Copy and past this link between the head tags (<head></head>) on your pages.

<link rel="shortcut icon" href="/favicon.ico" />

This is a common way to link the icon using XHTML and the one that we use on our site.

Here is another way:

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

And yet another way:

<link rel="shortcut icon" href="http://yourdomain.com/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://yourdomain.com/favicon.ico" type="image/vnd.microsoft.icon">


Troubleshooting and Tips

What if the favicon you just added isn’t showing up? Here are some things that may help if you cannot see your favicon:

  • Make sure it is uploaded and the link is in the proper place
  • Try deleting your browser’s history and cached Internet files - How to delete usage history
  • Try restarting your browser, this should be done after you delete your browser’s history
  • Try adding a question mark after your favicon link:
    <link rel="shortcut icon" href="/favicon.ico?">
    This will force the server to look for a new favicon every time the page loads.

If you follow those steps you should see your new logo appear in the address bar of your favorite browser.

01 Dec | Post by Jermaine Primus. Filed under Web Design, Web Basics.

Comments»

1. hunka - December 3, 2007

Nice information. Thanks !!

2. Akshay Hunka - December 12, 2007

Completely agree with your post. Its really feels good our website favicon icon on the browsers and more feel good when the site is bookmarked on their end…!! thanks

3. David - December 12, 2007

Great, informative blog entry! Good work guys.

4. Jermaine Primus - December 21, 2007

Akshay and David, thanks for the kind words. I’m glad it helped.