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 written by and posted on February 22, 2008 at 5:41 pm and filed under Blogging, How To. Bookmark the permalink.

Anders

Tried a few things written on other websites first.
Yours worked. Theirs didn't.
Thank you.
Keep up the great work!
Anders
Djames

I ran into the same problem when I trying to do favicons. Once I figured out the problem, I made a blog post.

I have seen a lot of wordpress plugins that add favicons. In my opinion, using a plugin when it's just simple copy and paste is a waste of time and another http request.

Good luck with your website.

Djames
Djames

Sorry about the delay in posting.

To answer the question, the code is exactly the same in Dreamweaver, just paste the code after <head> tag.</head>
Djames

Sorry about the delay in posting.

To answer the question, the code is exactly the same in Dreamweaver, just paste the code after <head> tag and before the closing head tag</head>.
Russel

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

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

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

www.rankmarket.com
Joe

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

www.rankmarket.com
contraption

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

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

how do i do this in dreamweaver? is the code the same ? :mrgreen:
David

how do i do this in dreamweaver? is the code the same ? :mrgreen:
Anonymous

Many many thanks! :mrgreen:
Anonymous

Many many thanks! :mrgreen:
Anonymous

Thanks for such a nice description and code.
Anonymous

Thanks for such a nice description and code.
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 :)
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.
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.