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

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 32 comments

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 8 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


gangsta295 8 years ago

OK HOW DO YOU DO IT


Abdur 8 years ago


prasad 8 years ago

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


H BAASHA 8 years ago

SuperB examples thanks thank a lot.


Rajeshwari Laxmanan 7 years ago

Thanks, it was a great help.

Nice, simpel n effcetive


logowhiz profile image

logowhiz 7 years ago from United States

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


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.


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.


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.


Wasantha 6 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.


honeyonsys 6 years ago

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


OS Web Design 6 years ago

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


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

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


Ramesh 5 years ago

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


Ramesh 5 years ago

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


Wedding Invitations 5 years ago

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


shirwen24 5 years ago

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

http://hubpages.com/technology/shortcuticon


Rajesh Murugan 4 years ago

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


Image 4 years ago

www.imagegolden.com


Rach 4 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.


VeronicaInspires 4 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.


Grace 4 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.


kalyan 4 years ago

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


Curt in Cali 4 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...


Curt in Cali 4 years ago

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

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


sdas 4 years ago

wasdsds


Jessica 2 years ago

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


Chalkoko Birding and Wildlife Safaris 18 months 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 17 months 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,


Chalkoko Birding and Wildlife Safaris 8 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.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working