bing code

Add your logo to the address bar [favicon]

Add your logo to the address bar [favicon]

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

style=“margin-top: 30pt”>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.

style=“margin-top: 30pt”>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.

style=“margin-top: 30pt”>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.

Kristen Bachmeier
Kristen Bachmeier
Kristen Bachmeier is Atilus' Director of Operations and helps to oversee all client accounts and day-to-day operations. Kristen also has a background in digital marketing, and has been working in the digital marketing space since 2012.

Recent Comments | 11 Comments
  • True Blood
    Reply

    Good article. I really like it. Thanks for information a lot. Very.

  • Kerry25
    Reply

    I don’t opine that each single student all over the world has a passion of essay papers accomplishing! Nevertheless, people that don’t know how to write have to utilize help of experienced custom writing service and enjoy a success.

  • Jermaine Primus
    Reply

    Thanks LGR thanks for the input. I do like the way they have categorized various favicons. This could be helpful if someone isn’t quite sure what favicon they would like to use or if they want to try one on their site.

  • LGR
    Reply

    Another site I use occasionally to find a favicon is http://www.freefavicon.com

    They have a pretty good collection of favicons you can download and use as well as a generator if you have an image you want to create one from.

  • Jermaine Primus
    Reply

    Hi Anne, glad we could help out.

  • Anne Osborne
    Reply

    Thanks so much for sharing your knowledge, the tip adding a ? after the .ico really helped.
    Much appreciated.

  • Jermaine Primus
    Reply

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

  • David
    Reply

    Great, informative blog entry! Good work guys.

  • Akshay Hunka
    Reply

    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

  • hunka
    Reply

    Nice information. Thanks !!

Recent Posts

Go to top of page