This article provides information on the following topics:
Vista® - A Resolution-Independent User Interface
• Vista® 256x256
PNG Compressed Icons
with Windows® XP
a Vista® Compressed Icon
Vista Compressed Icons in Software Projects
Vista®, the next version of Windows® to arrive
in 2006, will include many new features and enhancements.
The most visible evolution will be the new Graphical
User Interface (GUI). A first look at Aero (the
codename for the Vista® user experience) reveals
a slicker interface with sharper graphics.
Windows Vista® icon control slider
are not only visual. Aero has been designed
to comply with computer technology that will
delivered over the next decade. Many new features
have been implemented in Aero to support the
hardware changes to come.
A Resolution-Independent User Interface
of the most important enhancements of Aero
is its ability to deal with the high-resolution
displays of the future, and that feature a resolution-independent
UI. At present, monitors generally have a resolution
of 96-DPI (dots/pixels per inch). Simply put,
48x48 icons are displayed on screen in a half-inch
Future LCD screens however will support resolutions
up to 240/320 DPI. Therefore, to be displayed
at the same size without quality loss, icons
must include much larger images. That's the reason
why Vista introduces a new standard for Windows
icon size: 256x256 pixels.
screenshot below shows the Vista® File Explorer
displaying icons using the maximum resolution
available: 256x256. Of course the result seems
a bit "large" on a 96-DPI screen, but keep in
mind that this technology has been designed for
future screens. The add_favorite.ico file
has been created with Icon Workshop, a professional
icon development program from Axialis.
Windows Vista® displaying 256x256 icons
additional option will permit you to display
icons at smaller sizes more attune to medium-res
screens (say 150-DPI) screens. In such cases
Aero uses the 256x256 image and shrinks it the
desired size without any quality-loss. Based
on our preliminary tests, the result looks really
slick with real-time zoom!
PNG Compressed Icons
The standard Windows Vista® icons now include the following 12 formats:
The problem is that if you simply make an icon
and save it in standard Windows XP ICO format,
the resulting file will be around 400Kb on disk.
The solution is to compress the images. Only
the 256x256 images are compressed. The compression
scheme used is PNG (Portable Network Graphic)
because it has a good lossless ratio and supports
alpha channel (transparency). Based on preliminary
tests, the compressed icon sizes are 100Kb to
See the different formats below of an icon included
in Icon Workshop's sample icon add_favorite.ico
(the 16-color formats are not displayed but are
present in the icon):
PNG compression is embedded in the ICO
file for the 256x256 images only. PNG
compressed Vista® icons cannot be read
and edited with an XP-only compatible
icon editor, nor can you open them with
a PNG image editor.
You will require a Vista® compatible icon editor to edit such icons.
with Windows® XP
icons are compatible with Windows XP. They
can be used in XP but
the standard formats (48x48, 32x32 and 16x16)
which will be read and displayed. The 256x256
PNG formats will be ignored.
example, if you save a Vista® icon your
XP desktop, it will be displayed as 48x48. The
most important fact is that Windows® XP won't
reject Vista® icons.
we add other formats, such as 128x128, in Vista® icons?
but this is not recommended. 128x128 formats
are actually used under Windows
XP Desktop enhancers
or Dock-Bar applications. These applications
will probably support this icon format when ported
256x256 icons compatible with Vista® and Windows® XP
create uncompressed versions of the icons.
They will work on both Operating Systems. The
drawback is the icon file size will be around
400Kb for one icon! Using a professional icon
editor you will easily be able to remove the
a Vista® Compressed
is a step-by-step tutorial on how to create
a Vista® compressed icon using Axialis IconWorkshop.
This tutorial requires IconWorkshop
Corporate Edition v5.20 or more.
1. Create a 256x256
version of your icon image using any image/vector
editor. Save your artwork with smooth transparency
(32 BPP alpha channel) using a file format that
is compatible with IconWorkshop: BMP, PNG, JP2000,
You can also transfer your work
from Adobe Photoshop using the Axialis transfer
plug-in, or you can create an icon by assembling
several image objects.
2. Launch Axialis
IconWorkshop and open the image file. It is loaded
in an image document window, not an icon editor
window, as shown below ():
the scale-1:1 preview window is not in 256x256
mode, the preview
image will be cropped. It is recommended that
you switch to 256x256 preview mode if you want
to work with 256x256 Vista® icons. To switch
to this mode, right-click in the preview window,
a menu opens. Choose "256x256 Display".
The preview window now looks as shown above in
floating mode (). Use the same method to return to the previous
state: choose "128x128 Display", remove the "Floating
Window" option and use the mouse to dock the
4. Select the whole
image. Choose Edit/Select All or
press Ctrl+A. An animated selection
rectangle is now drawn around the image.
5. Choose File/Create
Windows Icon From Selection or press "I".
A large dialog box opens. This dialog box will
permit you to create all the image formats
you want to include in your icon in one simple
6. Type the Name of
the new icon project (). The
root of the image file is proposed by default.
7. Select the images
formats to include in the icon ()
by clicking on the images. To create a Vista® icon,
it is recommended that you follow the Vista® specifications
above. Don't forget to add the 256x256 vista
formats in RGB/A (XP), 256 and 16 color modes
create a fully-compliant Vista® icon, you'll
need to compress the 256x256 formats in PNG.
Select the associated option
9. You can also
choose to apply the dithering option to the 256/16
color images as well as add a filter effect to
smooth/sharpen the resulting images in RGB/A
mode (). View the results in the preview images.
10. When done, click OK.
A new icon project is created in a document window:
11. The main window
with the grid () is the edition area where you can retouch the icon.
The gray chessboard-like texture behind the icon
is the transparent portion of the icon (the alpha
channel info has been preserved). The scale 1:1
preview is displayed in the associated window
12. All the available
formats are displayed in a list (). You
can select them to edit () or
preview () them. See the application built-in help (press F1)
to learn how to add/remove formats or work with
this icon project.
13. The compressed
format (only the 256x256 formats can be compressed)
are marked with this overlay PNG compression
You can add/remove this option by choosing Draw/Compressed
Image Format (Vista®) or by pressing "K".
You can also use the local toolbar or a right-click
14. When done, save
the icon by choosing Edit/Save or
pressing Ctrl+S. The resulting
icon size is 150Kb.
Using Vista Compressed Icons
in Software Projects
mentioned at the beginning of this article,
Vista® icons specifications
are preliminary and subject to change. The
information provided here
is only based on initial tests.
icons have been tested on Visual
C++ 6.0, Visual .NET 2003 and
both reject the icon during the resource
is unsurprising since the new ICO file format
introduces a new header which points to
raw PNG data. Of course the compiler crashes
and returns a false error message. The DIB header
is not old, it is a PNG. Passing it through SDKPAINT
does not help.
Vista® compressed icons have also been reported
as not functioning in the Delphi programming
environment. New components will no doubt be
developed in the future that identify these shortfalls.
a new framework of icon presentation for high
definition monitors and operating systems while
remaining compatible with Windows XP and lower
definition screens. The larger 256x256 icon
format provides additional opportunities
for icon designers to explore more
subtle and detailed development in their aim
to create visual symbols that aid the user
in their use of the computer environment.