Adding Website Bookmark & Tab Icons

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

Example:
Without Icon

With Icon

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

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,

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

Bookmark List image

This entry was posted on Friday, February 22nd, 2008 at 5:41 pm and is filed under Blogging, How To. You can follow any responses to this entry through the RSS 2.0 feed.

18 Comments

Greg

Posted February 26, 2008 at 5:50 am | Permalink

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

Cheers,
Greg

[Reply]
Jeff Starr

Posted February 27, 2008 at 2:30 am | Permalink

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!

[Reply]
Djames

Posted February 27, 2008 at 2:59 am | Permalink

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

[Reply]
ivan clague

Posted April 22, 2008 at 11:29 am | Permalink

thx

[Reply]
Jennie

Posted May 16, 2008 at 10:52 am | Permalink

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!

[Reply]
Eranga Dissanayaka

Posted July 1, 2008 at 1:45 am | Permalink

Nice Work

Thanks a lot….

[Reply]
name

Posted July 27, 2008 at 11:43 am | Permalink

best of the best it is,

[Reply]
Jed

Posted August 27, 2008 at 5:10 pm | Permalink

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)

[Reply]
lhuv

Posted September 2, 2008 at 12:49 am | Permalink

i love this site.l

[Reply]
Anonymous

Posted October 4, 2008 at 1:17 pm | Permalink

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

[Reply]
Djames

Posted October 4, 2008 at 3:32 pm | Permalink

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

[Reply]
Anonymous

Posted October 14, 2008 at 2:31 am | Permalink

Thanks for such a nice description and code.

[Reply]
Anonymous

Posted October 16, 2008 at 11:49 am | Permalink

Many many thanks!

[Reply]
David

Posted December 15, 2008 at 3:57 pm | Permalink

how do i do this in dreamweaver? is the code the same ?

[Reply]
contraption

Posted December 21, 2008 at 9:29 pm | Permalink

Hi David - I’m wondering the same thing (actually trying to get it to work with Blogger and a custom template I can edit in Dreamweaver)…I tried the above code but haven’t had any luck yet.

let me know if you figure it out!

[Reply]
Joe

Posted December 21, 2008 at 11:46 pm | Permalink

very good way to get your website or blog seen and improve your overall ranking.

http://www.rankmarket.com

[Reply]
Russel

Posted December 23, 2008 at 8:19 pm | Permalink

Thanks for posting this info. I’d been searching for it for quite some time now.

[Reply]
Djames

Posted March 31, 2009 at 5:29 am | Permalink

Sorry about the delay in posting.

To answer the question, the code is exactly the same in Dreamweaver, just paste the code after tag.

[Reply]

2 Trackbacks

By Five Back to Basic Steps to Successful Freelance Marketing « Rosko123’s Blog on March 31, 2009 at 5:18 am

[...] we are all on a par with one another. Okay, so I’m not going to sit here and explain how you can put an icon to your book mark tab (well worth doing though by the way) or indeed tips on how to design a great logo but I think [...]
By Adding Website Bookmark amp Tab Icons HowBits Tidbits Helpful | bird baths on June 14, 2009 at 7:56 am

[...] Adding Website Bookmark amp Tab Icons HowBits Tidbits Helpful Posted by root 12 minutes ago (http://howbits.com) New irs tax form much easier middot fabric softener in bird bath the reason i type out the full address to the favicon is because of a bug in some wordpress themes the best place to put a favicon is at the root directory of your website post a comment you Discuss | Bury | News | Adding Website Bookmark amp Tab Icons HowBits Tidbits Helpful [...]