Icon Formats and Sizes - Which Formats and Sizes Should I be Using?
Selecting icon formats and sizes is a completely project dependent decision. Web developers and software designers should consider the purpose for which the icons will be used and the idea the icons are meant to convey before deciding to use the icon. Not surprisingly, web developers will need different file types and dimensions than developers constructing graphical user interface (GUI) applications. In order to make good decisions, designers and developers should have a fundamental understanding of icon specifications which will be explained in this article. Let us being with the four main formats in which XP Style Icons are available and then move on to Icon color depths and sizes.
XP Style Icon Formats
There are four main formats for icons which are as follows:
.ICO Format Icons - for Windows Based GUI Applications
If you are looking for icons for use in Windows GUI applications, then .ICO is the format to go for. The .ico format is an image file format which is comprised of many different images, at various sizes and resolutions. This ensures that the icons can be used on different backgrounds and viewed on both low and high resolution monitors.
.ico format supports 32 bit alpha transparency and hence can integrated with any background with ease.
.JPEG Format Icons: for Windows Web Based applications
.jpeg is a widely used format for web based applications which can be accessed through a web browser. But the format requires more file size and does not support transparency. This is the reason why .jpeg is not preferred by many when it comes to graphical elements like icons. They are more suitable for representing realistic photos. If the icon has fewer colors and is more graphical than photo-realistic you might want to consider the .gif format.
.GIF Format: for Windows Web Based Applications/Web Sites
If you want icons to be used in a web based application accessed primarily though a web browser or on a website then the .gif format is what you should be looking at. As mentioned earlier the .jpeg format might require more file size and does not support transparency. .Gif on the other hand supports transparency, has a comparatively smaller file size and can be saved in a range of colors (combination of hues and values) from 2 to 256 colors making it a better choice over .jpeg.
While the .gif format does support transparency it does not support alpha transparency. This being the case, the use of shadows may not look good on a different background than on the one the icon was initially created. If you are looking to use alpha transparency (so that the icon looks good in any background) you might think about using the .png format.
.PNG Format: for Web Based Applications and GUI Applications for Linux
As with the .gif format the .png format icons can also used in web based applications. There are however some major differences. The .png format is an uncompressed image format. This means that it can be difficult to scale down the file sizes. Although one major advantage of using the .png format is alpha transparency. Alpha transparency allows an image with structures like shadows to be placed over any background without "ghosting" or unsightly lines where the shadow ends.
While this format is great for adding graphical affects (like icons with shadow effect) to your web pages/applications, file size is still a factor to consider.
The .png format can also be used in GUI applications for Linux. So if you are a web designer, a web application developer or a GUI application developer for linux looking for icons with smooth edges and shadow effects, then .PNG is the format you should be using.
XP Icon Color Depths
Icons are generally available in the following color depths:
Learn more about Icon Color Depths
XP Style Icon Sizes
The standard icon sizes range from 16x16 pixels to 48x48 pixels. The standard sizes are as follows:
Which Size Should I be Using?
Icons with different sizes are used for different purposes as explained below:
Icons for Toolbars
Toolbars can use 16x16 or 24x24 pixel icons depending upon the application. Some applications come with a customizable setting allowing the user to decide which size he wants to view the toolbar icons in. For instance: Internet Explorer
Icons for Use With-in Applications
Application icons can be in 16x16, 24x24 or 48x48 pixels. This includes icons for usage within an application including files and folders.
The above size formalities hold true for icons used in GUI Applications. For use on websites and multimedia presentations you can use icons of any size depending on the design. There are some cases in which you might needs icons with a bigger size (above 48x48 pixels), like for instance for printing purposes. In these cases you can make use of icons in .ai or vector format. An icon in vector format can be stretched to a huge extent without effected the actual resolution of the icon. This gives the icon in any desired format at the same resolution.
Selecting icon formats and sizes is a completely project dependent decision. Web developers and software designers should consider the purpose for which the icons will be used and the idea the icons are meant to convey before deciding to use the icon. Not surprisingly, web developers will need different file types and dimensions than developers constructing graphical user interface (GUI) applications. In order to make good decisions, designers and developers should have a fundamental understanding of icon specifications which will be explained in this article. Let us being with the four main formats in which XP Style Icons are available and then move on to Icon color depths and sizes.
XP Style Icon Formats
There are four main formats for icons which are as follows:
- ICO format: GUI applications
- JPEG format: Web applications
- GIF format: Web applications
- PNG format: Web applications
Which Format Should I be Using?
The format that you should be using depends primarily on the project for which you need the icons as explained below:.ICO Format Icons - for Windows Based GUI Applications
If you are looking for icons for use in Windows GUI applications, then .ICO is the format to go for. The .ico format is an image file format which is comprised of many different images, at various sizes and resolutions. This ensures that the icons can be used on different backgrounds and viewed on both low and high resolution monitors.
.ico format supports 32 bit alpha transparency and hence can integrated with any background with ease.
.JPEG Format Icons: for Windows Web Based applications
.jpeg is a widely used format for web based applications which can be accessed through a web browser. But the format requires more file size and does not support transparency. This is the reason why .jpeg is not preferred by many when it comes to graphical elements like icons. They are more suitable for representing realistic photos. If the icon has fewer colors and is more graphical than photo-realistic you might want to consider the .gif format.
.GIF Format: for Windows Web Based Applications/Web Sites
If you want icons to be used in a web based application accessed primarily though a web browser or on a website then the .gif format is what you should be looking at. As mentioned earlier the .jpeg format might require more file size and does not support transparency. .Gif on the other hand supports transparency, has a comparatively smaller file size and can be saved in a range of colors (combination of hues and values) from 2 to 256 colors making it a better choice over .jpeg.
While the .gif format does support transparency it does not support alpha transparency. This being the case, the use of shadows may not look good on a different background than on the one the icon was initially created. If you are looking to use alpha transparency (so that the icon looks good in any background) you might think about using the .png format.
.PNG Format: for Web Based Applications and GUI Applications for Linux
As with the .gif format the .png format icons can also used in web based applications. There are however some major differences. The .png format is an uncompressed image format. This means that it can be difficult to scale down the file sizes. Although one major advantage of using the .png format is alpha transparency. Alpha transparency allows an image with structures like shadows to be placed over any background without "ghosting" or unsightly lines where the shadow ends.
While this format is great for adding graphical affects (like icons with shadow effect) to your web pages/applications, file size is still a factor to consider.
The .png format can also be used in GUI applications for Linux. So if you are a web designer, a web application developer or a GUI application developer for linux looking for icons with smooth edges and shadow effects, then .PNG is the format you should be using.
XP Icon Color Depths
Icons are generally available in the following color depths:
- 16 Colors
- 256 colors
- 16 million + Alpha channel
Learn more about Icon Color Depths
XP Style Icon Sizes
The standard icon sizes range from 16x16 pixels to 48x48 pixels. The standard sizes are as follows:
- 16x16 pixels
- 24x24 pixels
- 32x32 pixels
- 48x48 pixels
Which Size Should I be Using?
Icons with different sizes are used for different purposes as explained below:
Icons for Toolbars
Toolbars can use 16x16 or 24x24 pixel icons depending upon the application. Some applications come with a customizable setting allowing the user to decide which size he wants to view the toolbar icons in. For instance: Internet Explorer
Icons for Use With-in Applications
Application icons can be in 16x16, 24x24 or 48x48 pixels. This includes icons for usage within an application including files and folders.
The above size formalities hold true for icons used in GUI Applications. For use on websites and multimedia presentations you can use icons of any size depending on the design. There are some cases in which you might needs icons with a bigger size (above 48x48 pixels), like for instance for printing purposes. In these cases you can make use of icons in .ai or vector format. An icon in vector format can be stretched to a huge extent without effected the actual resolution of the icon. This gives the icon in any desired format at the same resolution.
Network Database Icons
Accounting Software Icons
Email Application Icons
Navigation Icons
Web Icons
People and Objects
Conceptual Icons
E-commerce Icons
General Articles
Everything You Wanted to Know About Icons and Icon Designing
Using Alpha Channel to Blend Image on a Background Smoothly
Familiarize Yourself With these Basic Concepts in Icon Designing
Do it Yourself Tips
Add Fav Icon to Your Website in Three Easy Steps
Converting Icons from Raster to Vector Format
Design Tutorials
Learn how to Create an XP Style Button Icon
Using Icons
Which Icon Formats and Sizes Should You be Using?
