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
<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,
The second link rel line adds your icon to a users Bookmark list.
