102130600404532
≡ Menu

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.


Website Logo/Favicon To The Address Bar

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.

Website Logo Favicon To The Address Bar

Website Logo Favicon To The Address Bar

Website Logo Favicon To The Address Bar

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.

Website Logo Favicon To The Address Bar

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.

pinging your blog

Richard Petrillo
Connect with me on Facebook
Follow me on Twitter

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.

{ 20 comments… add one }
  • 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.

    Best of luck,
    Let me know if I can be of any more help!
    RichardP

  • Beth ,

    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 :)

  • Hey Carl,
    I’m glad the tutorial helped. Thanks for your comment! I found that it could take up to 24 hours for the change to be made and your new favicon to show up.
    Have a great week!
    RichardP

  • Carl McHenry ,

    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!My Profile

  • Hi Clarence,

    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.

    RichardP

  • Clarence Caldsman ,

    I am having trouble adding the favicon. I don’t think I have the permission, and I don’t think I can edit the website in html either. Can you help me out with this?

  • To the best of my knowledge, unless you are hosting your own site with a service like hostgator or godaddy etc. You probably won’t have access to a c-pannel where you can upload your file.

    If Weebly offers access to everything then I would say you should be able to.

    Hope that helps!
    RichardP

  • Vimal ,

    i have hosted my site through “weebly”.can i Add My Website Logo/Favicon To The Address Bar? i have read all comments and get lots of knowledge.i thank u for those answers you have given.

  • 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.

    Thanks again,
    RichardP

  • Kev ,

    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.

    Hope that helps.

  • Hey Griffin,

    Thanks for leaving a comment on my site today.

    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.

    Please let me know how this turns out.
    Thanks,
    RichardP

  • Griffin ,

    Hi Richard,

    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?

    Thanks in advance for your help.

  • Hi Calli,
    I checked your site and your favicon is already there.

    If you don’t host your site then you can add this bit of code in between the Head Tags on each of your webpages.


    (this part: bill_061/favicon.ico”>) will be your image title

    I have not tested the above, but from the research I’ve done, it all points in that direction. GREAT question, thanks for asking!

    RichardP

  • Calli ,

    Hi Richard,

    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! :)

Cancel reply

Leave a Comment

CommentLuv badge