ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

How to display your web site icon/logo in the address bar and in the bookmarks list

Updated on August 16, 2007
Looks fancy and gets results
Looks fancy and gets results

The Simple but Slick Web Site Icon

Have you ever wanted to make your web site stick out in the favorites list or crowded address bar list by displaying a small logo next to your URL, but didn't know how? You are about to learn how one tiny little image can set you apart from the other guys.

Let's Do This!

In about five minutes, you will be displaying any logo you choose next to your address bar URL and favorites icons. But first, he are some things you need to know:

  • The image must be 16 pixels x 16 pixels.
  • The image must be in Windows icon format (.ico)
  • You will need access to the HTML source code of the page you wish to attach the image to, or you will need access to the base folder of your domain name.
  • The favorites icon is not yet available on HubPages, but I have faith that the feature will be available in the future. :)

Step 1 of 2: Making the Logo

Now the fun begins. You need a logo. A square logo. A very small, square logo.

This may seem like a chore at first, but you can do this. Perhaps you have one already. If so, proceed to Step 2. If not, here are some options:

  • Use an image editor to convert an image file to a 16 x 16 logo in .ico format and save it somewhere hnady.
  • A much easier, quicker, and 100% free option is to go online and have your image converted for free. The best tool I have found for this action is a small, but effective tool on html-kit.com. Here is the link to this wonderful tool. Simply go there, feed it your image, and your web site icon will be available in moments.

When you have your .ico file saved, proceed to Step 2.

Step 2 of 2: Linking the Logo

Now that we have the logo/icon, we have to make it available. There are two means of doing this:

  • The first way to link your logo is by simply placing it in the core directory of your web site with the file name "favicon.ico". For example, if your site is 'www.ilovehubpages.com', your logo/icon should be at 'www.ilovehubpages.com/favicon.ico'. Web browsers will look for favicon.ico whenever your site is added to a favorites list or is displayed in the address bar. If found, it will automatically appear next to your URL.
  • For those of you that do not have access to the core directory of your web site, there is another means to add this logo/icon to your URL: by pointing right at it through the HTML source code. In this case, you can save your logo/icon with any .ico filename you choose, but make note of the location (either the full URL path, or relative path from the document you are linking). All that needs to be done now is placing some code between the <HEAD> and </HEAD> tags of your HTML source code.

Example One:

<link rel="SHORTCUT ICON" href="A_Directory/logo.ico">

Example Two:

<link rel="SHORTCUT ICON" href="../A_Different_Directory/logo.ico">

Example Three:

<link rel="SHORTCUT ICON" href="http://www.yoursite.com/logo.ico">

Take note that both full and relative pathing works for this HTML snippet.

Some Closing Links

Now that we are done, here are some useful links related to this hub:

Favicon on Wikipedia

Working with favicons in PHP

Favicon support chart

Image Generation: Favicons

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      Linda 9 years ago

      This is a great step by step tutorial. I do a lot of online classes and training and appreciate clear, simple instructions.

      I also appreciate the free tool I have a great graphics designer that has helped me with favicons.

      Thanks for the content!

    • Jason Anderson profile image

      Jason Anderson 9 years ago from USA

      Here is a free favicon generator if you want to take pics you already have and turn them into favicons...http://www.faviconfactory.com

    • profile image

      gangsta295 8 years ago

      OK HOW DO YOU DO IT

    • profile image

      Abdur 8 years ago

    • profile image

      prasad 8 years ago

      How do I add one of those little icons to the URL before the http?

    • profile image

      H BAASHA 8 years ago

      SuperB examples thanks thank a lot.

    • profile image

      Rajeshwari Laxmanan 8 years ago

      Thanks, it was a great help.

      Nice, simpel n effcetive

    • logowhiz profile image

      logowhiz 8 years ago from United States

      This is a great help for me. Thanks a lot. Easy to comprehend.

    • profile image

      slym 7 years ago

      This is such a great way to establish your own brand on internet, but earlier, somehow this was not visible on Internet explorer address bar but then I found the way, thanks.

    • profile image

      slym 7 years ago

      This is such a great way to establish your own brand on internet, but earlier, somehow this was not visible on Internet explorer address bar but then I found the way, thanks.

    • profile image

      slym 7 years ago

      This is such a great way to establish your own brand on internet, but earlier, somehow this was not visible on Internet explorer address bar but then I found the way, thanks.

    • profile image

      Wasantha 7 years ago

      Thanks for your useful information and I am looking to add a fevicon to my site these days and this really help me to do that.

    • profile image

      honeyonsys 6 years ago

      hey i try this code. it works in local host but when i upload it on server its not working :(

    • profile image

      OS Web Design 6 years ago

      honeyonsys, you probably have the file location as something like, C://USER/Desktop/File/Icon.ico

    • profile image

      █║▌│█║▌│█││█║▌║ 6 years ago

      ???????????????SO FUNNY

    • profile image

      Ramesh 6 years ago

      Thanks it helps me and others also.Those are lime me.

    • profile image

      Ramesh 6 years ago

      Thanks it helps me and others also.Those are lime me.

    • profile image

      Wedding Invitations 6 years ago

      Thanks for the tip, will get onto this immediately for our wedding invitations website.

    • profile image

      shirwen24 5 years ago

      OH! this article make me an idea to put an icon to my link-domain. Thanks a lot for sharing.

      https://hubpages.com/technology/shortcuticon

    • profile image

      Rajesh Murugan 5 years ago

      Thanks.........nice Tutorial.

    • profile image

      Image 5 years ago

      www.imagegolden.com

    • profile image

      Rach 5 years ago

      Wow! I actually can't believe how easy these instructions were. I didn't think, just looking at them, that it was so simple. Thanks! You're great.

    • profile image

      VeronicaInspires 5 years ago

      This is great! I saved my favIcon, but now I need to know how to apply it the source code.... I'm a newbie.

    • profile image

      Grace 5 years ago

      Offering Mombasa Beach Safaris,Tsavo Safaris,Kenya Beach Safaris,Amboseli Safaris,Wildlife Safaris,Birdwatching Safaris,

      Masai Mara Safaris,Mombasa Road Safaris,Kenya Road Safaris,Lake Nakuru and Lake Naivasha Safaris.

    • profile image

      kalyan 5 years ago

      its working in chrome but in internet explorer its not dispalying why ?

    • profile image

      Curt in Cali 5 years ago

      Kalyan

      IE versions lag far behind when it comes to changing their browsers to the latest in browser features, safety, etc.

      Most new browser features will work in the latest version of all browsers (IE9). Firefox, Opera, Chrome and others have support for most features in many of their earlier versions.

      http://www.w3schools.com/cssref/css3_browsersuppor...

    • profile image

      Curt in Cali 5 years ago

      Oops...here is the link...hit the wrong button.

      http://en.wikipedia.org/wiki/Favicon#File_format_s...

    • profile image

      sdas 4 years ago

      wasdsds

    • profile image

      Jessica 3 years ago

      International Friend Finder website - free registration. Millions of members, quick and easy sign up. Nice and convenient friend finders.

    • profile image

      Chalkoko Birding and Wildlife Safaris 2 years ago

      Mombasa Safaris,Masai Mara Air Safaris,Nairobi Air Safaris,Mombasa Excursions,Nairobi Excursions,Amboseli Safaris,Tsavo Safaris,

      Wildlife Safaris,Mombasa Road Safaris,Kenya Road Safaris,Birdwatching Safaris,Cultural Safaris,Short Safaris from Safaris,Wildbeest

      Migration Safaris.

    • George Akinian profile image

      George Akinian 2 years ago

      It displays in local host but won't show on the server. Can you please be more specific to what may be hindering it?

      I have favicon.ico inside root directory of the project, and i added the tags directly into html exactly the way specified in the post.

      thanks,

    • profile image

      Chalkoko Birding and Wildlife Safaris 18 months ago

      Kenya Safaris,Tsavo Safaris,Masai Mara Safaris,Amboseli Safaris,kenya air safaris,Short Safaris,

      Mombasa Air Safaris,Nairobi Air Safaris,Mombasa Beach Safaris,Kenya Beach Safaris,Mombasa Excursions,Nairobi Excursion,

      Balloon Safaris,Cultural Safaris,Short Safaris.

    Click to Rate This Article