February 22, 2008

Adding Website Bookmark & Tab Icons

by — Categories: Blogging, How To — Tags: , , , 42 Comments

Creating Bookmark, Address Bar, Firefox Tab Icons for your website
Also referred to as Favicons

Without Icon
Addressline before Adding Website Bookmark & Tab Icons
With Icon
addressline after Adding Website Bookmark & Tab Icons

We have all seen the icons that appear next to the address bars on some websites, and the logos that appear on the bookmark list when you bookmark the websites. If you use Firefox, you will see the icon appear on that tab bar.

But have you ever wondered how it’s done? Here’s how to add it, and I’m going to try to make it as easy as possible for you to implement it on your own website or blog site.
So here is how you add it to your website

1. Find a picture you want to use, and make sure it’s something that looks good at 16 x 16

2. In order to make the image appear on the website, it has to be in a icon or .ico format. You can use a image editor program to do it, such as Irfanview, or you can follow this link to html-kit, and use their FavIcon from pics Generator. A website that lets you create your own Icon, is http://www.favicon.cc/ . You can just draw in the icon you want and download the picture. and it gives you a live view of the icon you are drawing, underneath the input area.

2a. If you used Irfanview – all you need to do is open the picture in the program, Press Ctril + R. Then look at the bottom of the screen for Preserve Aspect Ratio and un-check it. Then set the width and the height to 16. Press ok, and then Press S to save it, and under the filename you will see a box that says Save as type. Change this to ICO – WIndows ICO and save it as favicon. ( You can use different names for this icon, I just prefer to use favicon )

2b. If you used Html-kit, just click Browse in the Source Image box, and find the image you want to use, and then click generate FavIcon.ico. Then on the next page click Download Favicon.ico.  The file is zipped so you need to use a program to uncompress it. If your computer doesn’t automatically open the file, then I recommend using IZArc.

3. Once you have the picture converted to an .ICO file, you need to upload it to your website. I prefer to put the favicon.ico file in the root directory of the website.

4. Now that it’s on your website, you need to add 2 lines of html code to header part of your website. If you use WordPress, this is how you add it.

4a. WordPress – Log into the WordPress back office, and click on Presentation. Now goto Theme Editor, and on the right hand side under theme files, you want to locate Header and then click on it. Once it opens you want to find the last <link rel=  Line then copy and paste these 2 lines in. Remember to put in your website address, and the name of the icon if you changed it to something other than favicon.ico

<link rel="icon" type="image/x-ico" href="http://www.yourwebsite.com/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.yourwebsite.com/favicon.ico" />

The reason I type out the full address to the FavIcon is because of a bug in some wordpress themes. I have noticed that if you just use /favicon.ico, that sometimes the icon will only appear on the home page and not appear on other pages.

The first link rel line adds the Icon to Address bars, and Firefox Tabs,

firefox tabafter Adding Website Bookmark & Tab Icons

The second link rel line adds your icon to a users Bookmark list.

bookmarklist Adding Website Bookmark & Tab Icons

  • http://howbits.com Djames

    I take it you mean, you are currently building a website and wish to have a favicon in place for when it will presnt on the internet? Or is it something else you are doing with the website?

    The best place to put a favicon is at the root directory of your website, such as where your index.php / .html is located. If you can’t access these files, because you are using something like officelive, then the best thing to do is to upload the image to an image storage place online and link to that image, such flikr, etc.

    If you really want to get creative you make a forum account, upload the favicon as your forum icon image, and just hyperlink to your forum image :)

  • Anonymous

    Can you tell me how to upload favicon on your website which is not hosted on the internet & its present on your machine only.

  • http://www.equalpar.info lhuv

    i love this site.l

  • Jed

    Great instructions. Took me minutes.

    Jennie I don’t know if you’ve found your transparent background solution but upload your .ico to http://www.favicon.cc/ They have transparent as an option colour.

    I have one funny little glitch. I have the favicon showing when I use http://www.sitename.com but it won’t show when I use http://sitename.com

    I edited the HTML code directly with the two lines (in SeaMonkey)

  • http://link name

    best of the best it is,

  • http://freeopensource.nm.ru Eranga Dissanayaka

    Nice Work

    Thanks a lot….

  • Jennie

    Thank you! Very clear directions! Now I just need to get my image to have a transparent background — HTML Kit made it white. So excited!

  • ivan clague

    :mrgreen: thx

  • http://perishablepress.com/ Jeff Starr

    Thanks for the post! It is great to see more useful information helping people to understand and use favicons. Also, for a slightly geekier take on favicons, check out this comprehensive favicon reference. Hopefully it will provide additional help for your readers. — Cheers! :)

  • Greg

    Thanks. I was curious how this was achieved and could not find any html code in various websites source code.


  • http://howbits.com Djames

    Thanks Jeff for posting the link.

    That is quite the comprehensive guide to Favicons. Even had some things I didn’t know about. I never knew you could use png for a favicon, I always thought it was Gif, jpg, and Ico only. Well I will have to experiment with it.

    Thanks again

© 2014 HowBits All rights reserved - Wallow theme v0.46.5 by ([][]) TwoBeers - Powered by WordPress - Have fun!
powered by