This tutorial assumes 2 things:
- You own or have access to your own domain
- You are familiar with using an FTP program or other means of transferring files to and from your web site
Ok, so to start, you know what a favorite icon is, right? It's that little icon that appears to the left of a URL in a browser's address bar, and to the left of the page title in a browser tab. For Google, it's a blue "G" in a box. Pretty cool, huh? It adds a little something, a professional touch. It's all right if your site doesn't have one, but it would be neat if it did. Let's find out how to make it happen.
One simple method is to use a free piece of software called Paint.NET. It's like Windows Paint, but far more powerful. And it's free. You can get it at getpaint.net.
Now, once you've got that, you're going to need the Icon/Cursor Paint.NET Plug-in. Unzip that, go to the directory in which you installed Paint.NET, and place the IcoCur.dll file in the "File Types" folder.
Great! Now you've got a graphics program that can save icon files. So all you need is a picture. Find a site with public domain images. Wikipedia is sometimes useful, because when you click on an image, there's a box that tells you whether that picture is free for external use. Or, you can search Google for public domain images.
Find an image you like, but be aware that it is going to get very small. It must look good in a 16 by 16 pixel format. Open your chosen image in Paint.NET. At this point, you've got a few options. You can crop it and shrink it to 16×16, and then save it and pick the .ico file type. Or, you can crop it to make it square, but still big, and then save it without shrinking it. Or, you could just save it the way it is, without adjusting it at all. Whichever outcome looks best will probably be right for you. And be sure to name the file "favicon.ico." It may not really be necessary, since you can tell web pages where to look for it, but it's the standard. In fact, even if you don't specify whether you even have a favorite icon, the file favicon.ico will be used if it exists. So it's a pretty good idea to use that name.
What's great about Paint.NET is that you can save transparencies within an image. This is helpful when white isn't the background color, as happens when icons are displayed in tabs, or when the address bar changes colors. If you have a white area that is supposed to be the background to your icon image, you can delete that, and what will remain in Paint.NET is a transparent area that will carry over every time the image is displayed.
The icon extension is so powerful, it can save multiple icons in a single file. Sometimes a normal 16×16 icon isn't needed, and a 32×32 is. I've never run into that situation, but the icon plugin allows you to save the following formats: 16×16, 24×24, 32×32, 48×48, 64×64, 128×128, and 256×256. If your image is an odd format, like 256×193, you can also save that as a .ico, as long as it's not bigger than 256×256. And, each format can be saved as either 8-bit (low quality) or 32-bit (high quality). I usually just leave it on the default setting, which saves 4 different versions: 16×16 8-bit, 16×16 32-bit, 32×32 8-bit, and 32×32 32-bit.
What I've noticed is that it seems like IE will display 16×16 32-bit (high quality) in the address bar, but 16×16 8-bit (low quality) in tabs. Firefox seems to use the high quality version on both the address bar and tabs. Opera appears to prefer the low quality 16×16's on both address bar and tabs. So if you can, try to make your icon look great even when in 8-bit format, which uses fewer colors. That's probably why Google uses such a simple icon, a "G," since it will look good even at the lowest quality.
After you've adjusted your chosen image, resized it, and saved it in whichever .ico formats you chose, you can then upload it to the top level of your web site. It should occupy the same area as your index file (index.htm, or index.html, or index.php, etc.) assuming you don't have that in a folder. Once you do that, the "favicon.ico" file will be used by whatever browser looks for it. But just to be safe, you can also specify in the header portion of each of your pages where it is.
In the source of your web page, between <head> and </head>, add this:
<link rel="shortcut icon" href="favicon.ico">
That tells the browsers that don't automatically look for a favorite icon that they should, and where to find it. You should add that instruction to every page you want the icon to accompany.
Now, to test it out. IE isn't really helpful in this area, since for some reason it takes a while to update in the favorite icon area. Some say you need to clear the cache, or page refresh, or click the icon and drag it, and then release it to reveal the new one. A much easier method is to just use Firefox. I believe Firefox will look for a new favorite icon each time it loads a page.
If you've already saved your page as a favorite on your Bookmark Toolbar in Firefox, the old icon there may not change. So what you can do is bookmark the page again to the toolbar, and click the new bookmark to load the page. This tells Firefox to check and update the bookmark icon, and the old bookmark will do the same. Then you can delete the extra bookmark, and save one with the right icon.
If at this point your icon doesn't look quite right, you can go back and adjust it in Paint.NET. The beauty of the program is that once that you know how to make an icon image, you can update and change it as often as you please.If you enjoyed this post, I'd be delighted to have you as a subscriber to my RSS feed.