If you keep a lot of bookmarks like most people do then you have seen those little icons that are found in url bars, bookmark folders or on your desktop if you drag a webpage url to your desktop from your browser.
Although there have been some innovations over the years the original file for this icon image is called a favicon.ico file.
This is a special type of image file that can hold variations of the same image that will be displayed depending on its location.
In your browser URL bar you will see a 16×16 pixel image.
On your desktop you will probably see a 48×48 pixel image.
And in your explorer directory browser when you are viewing files you are likely to see a 32×32 pixel image.
Notice that we are referring to Microsoft Windows and on other platforms or devices you might find icon images of different sizes.
Apple likes a 60×60 pixel image for many of their devices and no matter what operating system or device you are using these icons can scale based on your settings.
For that reason it is suggested that when you make your Website favicon.ico file that you include the three most common sizes.
48 × 48 pixels
32 × 32 pixels
16 × 16 pixels
In addition to the size of the image you also have color depth considerations.
The higher the color depth or bits then the better the image will look.
The standard color depths are 8bit 16bit and 32bit.
If you import a 24bit image /png file into your ico editor software it may also keep the 24bit image layer. We suggest you delete that layer.
Color depth is dependent on the hardware displaying the image.. most new computers and devices can display 32bit images but for things like small icons they may revert to 16bit or 8bit to save size.
In your browser url bar you will find 8bit is more than enough and for desktop icons 32bit works well.
You will also have the ability to define transparent areas of your icon however a white background is also good.
Transparency in small icon files is difficult to deal with because you often end up with outlines around your image where dithering occurs. This requires lots of zoomed in editing that may not result in spectacular results. So unless you are building a desktop application and getting paid try not to deal with transparency … its a time eater.
Making your multi layer favicon file
The easiest way and best is by using a desktop application because this will allow you to control many aspects of your image and make quick tests.
In a pinch you can also find many online sites that will convert an image file format to ico. They work but often lack features and may require a login to save settings. Another drawback of online ico editors is that they often make your ico file public and downloadable by everyone. DON’T use them for commercial sites you are developing or you will find your icon all over the web.
We just ran across a Sourceforge project to make ico files and it works reasonably well.
We are not going to link to it because by the time you read this there may be another solution however this app works pretty good.
The program is called Iconizer and it can compile many different layers within your ico file.
for websites you only need the three main sizes 48 32 16 pixels however you can even just use the 16×16 pixel image if you only want a url and bookmark menu ico.
Using the software is pretty simple.
Design your icon file in a image editor like photoshop or gimp and save it in png24 format.
Open Iconizer and add the image.
Select the sizes you want and the bit depths.
Delete the layers you do not need and save the file.
For basic icons we find that 8bit color is fine
Do not rely on your os to scale a 16px image up or a 48px image down … you should include all 3 layers or accept the smaller 16px size for all formats.
