How to Add Your Website Logo/Favicon To The Address Bar

Adding your website Logo Favicon to the address bar isn’t going to increase traffic to your site or generate more sales.

It will however give your site a more polished and professional look.

Typically when you type in www.(a web url) .com you will see one of a few things in the URL or address bar. Either Nothing next to the http://, a Globe if using Safari’s web browser, or a Company Logo.

Having your logo show up in the address bar is just one more way of Branding yourself and is a great way to stand out from the crowd. Your Favicon or logo will even stand out when viewing your bookmarks in a list form.

Side note: There are some browsers that won’t display any logo or Favicon in the address bar no matter which steps you take.

Okay, so how can I stand out by adding my Website Logo Favicon To The Address Bar?

First off you need to create the favicon image or file. This file has to have the extension .ico otherwise it won’t be recognized and the file size must be 16×16 pixels. Save the file as: favicon.ico

I made my logo in Photoshop but you can use any photo editing software to create your image or logo. You can even use a picture of yourself if that is part of your branding. I saved my file to the desktop as a .jpg and then just changed the extension to .ico after the file was created. In photoshop there is no “Save As” favicon.ico

Method 1.

This option is the easiest way to insert your website logo Favicon to the address bar. It will also insure that every page of your website displays the Favicon properly.

If you have root access to your site, usually through your hosting company, then you can upload the image there. Upload it to the Public_htm folder.

Method 2.

If you don’t have access to your root directory because you are not hosting your own site then you will need to add the following tag to your beg page so the browser knows where to look for your icon or favicon.ico file. If you use this method you can save the file with any name, as long as you use the .ico extension. You can call it “logo.ico” if you want. This is of course assuming that your website is under the directory “~your_directory”.

Use the following: <Link Rel=”SHORTCUT ICON”

HREF=”/~your_directory/logo.ico”>

Hopefully you are hosting your own website through a hosting service such as HostGator and you can use method 1. HostGator has excellent customer support and will host your site for as little as 3.95 per month at the time of this writing. They can walk you through the process if you have any questions or problems.

Don’t forget to leave me a comment and share this with your friends on Facebook and Twitter if this info on adding your website logo favicon to the address bar was helpful.

If You’re Still Having Problems Sponsoring & Building Your MLM Team, Download This Free Training and Learn How To Generate Leads For Your Business Daily! CLICK HERE NOW For Your FREE 60 Minute Training!

Leave me a comment if you encountered any problems adding your website logo favicon to the address bar.

Hi Beth,
I am sorry to hear you are running into these issues with HostGator. Back when I wrote this article HG wasn’t charging additional fees for things like a favicon.
I have moved most of my sties away from HostGator and have been using SiteGround ( http://bit.ly/SiteGHost ) for a few of my sites. This site is being hosted by SpeedRack, a friend of my started his company a year or two ago.

He doesn’t put hundreds of sites on a server and it has much faster load times. It is quite a bit more expensive. If I were you I would look into SiteGround to see if they can offer you everything you need. My guess is you will be very happy with them.

I followed all the directions, but host gator says I cannot have a custom favicon without upgrading- I do not need ANY of the other features, and they want me to pay $10+ per month for just having my own favicon? Well, I decided I could live without one. However, the real issue is that apparently my website is stuck with a HOST GATOR favicon!!! They said there is no way to change that without upgrading! I can see mine in the root folder, and deleted theirs… if this is the case I am already feeling that Host Gator is morphing into the same gimmicks as GoDaddy (whom I just left for them!). I hope you might have some insight to this. Thanks for the informative site

Thank you so much for adding this, it made it very easy to add this to my site. I think, i made a 16×16 icon and name it “favicon.ico” and deleted the old “favicon” and i still see the old one up. Hopefully by the time you visit the site it will be changed, maybe there is a poor update rate. Whatever the case im glad this tutorial is here.Carl McHenry recently posted..Hello world!

Thanks for your comment. Sorry to hear you’re having problems. Unless you are hosting your own site someplace like Hostgator or any of the others, you won’t be able to make any changes to your favicon.

The file needs to be placed in the c-pannel at the hosting site. Let me know what platform you are using and maybe I can help.

Thanks Kev for your insight. Although, I am using photoshop CS3 and there is no Save As .ico extension in my version. The steps I laid out in the article is exactly how I have achieved adding a favicon to the address bar on numerous occasions.

You need to open file up in Photoshop again, and then save as. This time select .ico as your extension. Renaming a file on your desktop will not change which type of file it is, so you went from having a jpeg called favicon.jpg to favicon.ico.jpg, meaning that the name of your file is now “favicon.ico” but it is still a jpeg.

It sounds like you’ve taken all the right steps. I was just looking in my C-Panel and the file I made in PS which I then changed the extension to .ico (image title is: favicon.ico) is sitting in the public_html folder.

You may have already tried this but I would reopen the file in photoshop and save it as a .png or .bmp. Once it’s on your desktop change the file name to favicon.ico and try and upload it to your c-panel again.

I don’t understand why it’s showing up as a .ico.jpg with both extensions. I have never seen that happen before.

I have my website hosted through HostGator, and you are right – their customer service seems top notch so far.

I followed your steps to add my logo (favicon) to the address bar, but no luck. I created my 16×16 pixel logo with PhotoShop and saved it to my desktop as a jpeg. I changed it’s name to .ico and uploaded it to my public_html folder, but it shows up as .ico.jpg. How do I get rid of the .jpg?

I used to do this a long time ago and I uploaded the .ico image in a website that hosts these images. May I ask, if I don’t host my own website, do we need to upload the .ico image in a specific host or something? Thanks!