How to display your web site icon/logo in the address bar and in the bookmarks list
By ryanl
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:
Amazon Web Site Design Links
 | Amazon Price: $13.67 List Price: $30.00 |
 | Amazon Price: $19.26 List Price: $39.95 |
 | Amazon Price: $21.33 List Price: $44.99 |
 | Amazon Price: $23.94 List Price: $44.99 |
 | Amazon Price: $15.26 List Price: $29.99 |
Comments
Here is a free favicon generator if you want to take pics you already have and turn them into favicons...http://www.faviconfactory.com
OK HOW DO YOU DO IT
How do I add one of those little icons to the URL before the http?
SuperB examples thanks thank a lot.
Thanks, it was a great help.
Nice, simpel n effcetive
This is a great help for me. Thanks a lot. Easy to comprehend.
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.
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.
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.
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.
hey i try this code. it works in local host but when i upload it on server its not working :(
honeyonsys, you probably have the file location as something like, C://USER/Desktop/File/Icon.ico
???????????????SO FUNNY
Thanks it helps me and others also.Those are lime me.
Thanks it helps me and others also.Those are lime me.
Thanks for the tip, will get onto this immediately for our wedding invitations website.
OH! this article make me an idea to put an icon to my link-domain. Thanks a lot for sharing.
Thanks.........nice Tutorial.
www.imagegolden.com
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.
This is great! I saved my favIcon, but now I need to know how to apply it the source code.... I'm a newbie.
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.
its working in chrome but in internet explorer its not dispalying why ?
Linda 4 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!