Rockstar Icon Designer - Kate McInnes [14]
A quick guide to browser support: the .ICO format is the most universally supported file type, closely followed by .PNG. SVG is a particularly useful format due to its ability to scale, but is only supported by Opera version 9.6 and above.
Favicons need to be simplified versions of the logo or symbol for the website for clear rendering, in the example you will see the Video Hive Logo next to the Video Hive Favicon Design. Notice how the detail is taken away but the essence of the logo is still very clear.
Icon Categories and Conventions
It's an exciting time to be an icon designer. We have an explosion of mobile devices, third party software being developed around the globe and display technology that allows it all to be seen on amazingly crisp and colorful screens. In this chapter we will explore the different varieties of icons and best practices for their concepts, rendering and output.
Application Icons
Application icons are used to launch a program or utility and appear in various locations within an operating system. Depending on the platform, they can range in size from 16 pixels to a massive 1024 pixels square.
Icons by Joker2011.
Design Tips
Often designed to reflect a logo or identity, application icons may also represent the function of the software — such as a camera for a photo editor or pencil and paper for a note taking application — and sometimes form a collection of programs, such as Microsoft Office or the Adobe Suite.
Modern application icons are designed to create a positive emotional response through the use of hyper realistic illustration and clever eye catching designs. Like the brightly colored icing on a delicious cake, this is where you will see icons at their best. An example is the amazing application icons made for Mac. While following the design guidelines set out by Apple, third party developers for the Macintosh platform take the guidelines to make realistic looking icons and turbo-charge it. You can find some of these designers on websites such as dribbble.com and deviantart.com, which are both excellent places to seek out leaders in the art of icon design.
When designing application icons for a particular platform, you will need to seek out a developers guide. Apple and Microsoft both have online guides available that outline the style and context in which icons should be constructed for each platform. Although similar in appearance, Microsoft and Apple's icons have subtle differences, such as color palette and lighting effects, which should be observed.
Document, Settings and Plug-ins
Document, settings and plug-in icons are traditionally based around the application icon design to help identify a setting as belonging to a particular program when viewed in the file browser. Typically used in word processing and graphics programs, the most notable examples of this style of icon would be the page icon for a.doc file and the building brick icon of a plug-in.
Icons from the Crystal Interaction Design project.
Design Tips
Document, settings and plug-in icons should be simple and have some consideration for the application or operating system they will be used in conjunction with. Modern operating systems, such as Windows 7 and Mac OS X can sometimes change these icons by using default system icons in conjunction with overlays from the target program. Because this style of icon is often dictated more by the OS than the program itself, it's always best to check the specifications for the icons before you design anything that may overcrowd the icon.
Alerts
Alert icons are used in conjunction with user feedback such as errors, warnings or information dialogues. An example of alert icons are the white “x” on a red circle for important warning, the black exclamation mark on a yellow triangle