ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

      Chalkoko Birding and Wildlife Safaris 

      2 years 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.

    • George Akinian profile image

      George Akinian 

      3 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 

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

    • profile image

      Jessica 

      4 years ago

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

    • profile image

      sdas 

      6 years ago

      wasdsds

    • profile image

      Curt in Cali 

      6 years ago

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

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

    • profile image

      Curt in Cali 

      6 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

      kalyan 

      6 years ago

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

    • profile image

      Grace 

      6 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

      VeronicaInspires 

      6 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

      Rach 

      6 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

      Image 

      6 years ago

      www.imagegolden.com

    • profile image

      Rajesh Murugan 

      6 years ago

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

    • profile image

      shirwen24 

      7 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

      Wedding Invitations 

      7 years ago

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

    • profile image

      Ramesh 

      7 years ago

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

    • profile image

      Ramesh 

      7 years ago

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

    • profile image

      █║▌│█║▌│█││█║▌║ 

      8 years ago

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

    • profile image

      OS Web Design 

      8 years ago

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

    • profile image

      honeyonsys 

      8 years ago

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

    • profile image

      Wasantha 

      8 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

      slym 

      9 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 

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

    • logowhiz profile image

      logowhiz 

      9 years ago from United States

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

    • profile image

      Rajeshwari Laxmanan 

      9 years ago

      Thanks, it was a great help.

      Nice, simpel n effcetive

    • profile image

      H BAASHA 

      10 years ago

      SuperB examples thanks thank a lot.

    • profile image

      prasad 

      10 years ago

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

    • profile image

      Abdur 

      10 years ago

    • profile image

      gangsta295 

      10 years ago

      OK HOW DO YOU DO IT

    • Jason Anderson profile image

      Jason Anderson 

      10 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

      Linda 

      11 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!

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)