PDA

View Full Version : Bookmark Icons Tutorial


Alakazam
08-06-2007, 08:34 PM
If you have Internet Explorer versions 5.0 or higher you should be able to see a little icon beside the URL of my site and also when you bookmark it. Well that is called a custom bookmark icon and it is used so that my site will stick out more when you go to look through the links.


In the above example, you can see how the custom icons stand out and look a lot better than a default
one. Well now that you know what is it, I bet your next question, "is how can you make one?" and I'll tell you! Well surprisingly enough, it isn't that tough at all to make one and it will help get your site lots more hits.


The first thing you need to do is come up with a suitable icon. Icons are just simple 16 by 16 pixel bitmap images, but Explorer won't use ordinary GIF or JPEG files. You'll have to save the image as an ICO file, a special icon file format. The biggest difference between this format and GIF and JPEG files is that ICO is designed to save multiple sizes and color schemes of one image. This is because Windows displays desktop icons in a variety of ways depending on the context and monitor settings.


Now the only problem is how can you convert your files to ICO format? Well you can't just name them .ico because that doesn't work. The only way to convert them is to use a program that can properly convert them, so that they work correctly. Favicon.com (http://www.favicon.com/) is the solution, where you can find a few ways of converting your files and they can even make you your own bookmark icon, but it will cost you.


Well once you have make your ICO image, there are a couple of different ways to post it to your site. The simplest way is to post the file to your root directory as favicon.ico (for example, our bookmark icon can be found at www.pokezam.com/favicon.ico). When a user bookmarks any of the pages on your site, Explorer will look for this file in the root directory and use the icon for the bookmark.


You may not have access to your root directory (if you are using free Web space from Angelfire, for example), but you can still post a custom icon in basically the same way. You'll need to post the favicon.ico file in every directory with Web pages people might want to bookmark. You may want to post your icons this way even if you do have access to your root directory, because it will let you set different icons designs for the Web pages in all your different directories.


You can also set up individual icons for each page using a simple bit of HTML code. To post the icon this way, give the icon a simple name (other than favicon.ico) and post it as an ICO file anywhere on your Web site. Then ad this code to your Web pages, in between the <head> tag and the </head>:


<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">


After a user has bookmarked your site, Explorer will also display your icon in the location bar beside your URL whenever it brings up your site.


If your custom icon won't load correctly, it could be because of a number of things. Some free servers have a policy against ICO files, so this might be the problem. Also make sure that your ICO file, is a real ICO file and not just renamed with the extension .ico.


If you think you did everything correctly and you have uploaded your icon and it still isn't working, try deleting your cookies and temporary internet files and restarting your computer. If it still isn't working then try dragging your icon and then dropping it in the address bar.