The Icon Reference Chart is one of Hicksdesign's Goodies
This chart is a ongoing project - improvements, tweaks and additions will be made!
| Device | Context | Size | Format & Naming | Notes | |
|---|---|---|---|---|---|
All ![]() |
Favicon | 32px, 16px |
favicon.ico/.png/.jpg/.gif1 |
If your favicon is named 'favicon.ico' and placed in the site root, you don't need to link to it. Browsers will automatically look for it. 1 With all modern browsers (and IE8+) you can use .gif, .png or .jpg, as long as you use a link tag. However, these formats can't contain multiple size resources like .ico.
See Lewis Francis's Favonic for more detailed information about colour depth for favicons. |
|
Android ![]() |
Launcher & Menu | 36px (ldpi), 48px (mdpi), 72px (hdpi) |
.png | Each icon has 3 sizes for different screen densities: ldpi (Low), mdpi (Medium), and hdpi (High) |
|
| Status Bar, Tab, Dialog & List View | 24px (ldpi), 32px (mdpi), 48px (hdpi) |
||||
Google Chrome ![]() |
Extension Icon | 16px, 48px, 128px |
- | icon16.png, icon48.png, icon128.png |
|
iPhone![]() |
iTunes Artwork icon | 512px 1(90px) | .png | Apple Human Interface Guidelines: Icons. Corner radius values are given in (brackets) 1Must be named 'iTunesArtwork' without the .png extension. The App Store icon is reduced to 176px square for the app's listing 2iOS trims 1px from the artwork, so visible area is 48px. It also adds it's own border, generated from detecting colour in the artwork |
|
| App icon | 57px (10px) | ||||
| Spotlight/Settings icon | 29px 2 (5px) | ||||
| Toolbar/Navigation Bar icon | 20px | ||||
| Tab Bar icon | 30px | ||||
| Custom Document icon | 22 × 29px | ||||
iPhone4![]() |
App icon | 114px (20px) | .png | ||
| Spotlight/Settings icon icon 2 | 58px (10px) | ||||
| Toolbar/Navigation Bar icon | 40px | ||||
| Tab Bar icon | 60px | ||||
| Custom Document icon | 44 × 58px | ||||
iPad![]() |
iTunes Artwork icon | 512px 1 (90px) | .png | ||
| App icon | 72px (12px) | ||||
| Spotlight/Settings icon icon 2 | 29px (9px) | ||||
| Toolbar/Navigation Bar icon | 20px | ||||
| Tab Bar icon | 30px | ||||
| Custom Document icon | 64px 320px |
||||
| App Spotlight icon | 50px (9px) | ||||
Linux ![]() |
Application Icon | 128px, 64px 32px, 22px, 16px |
.png for 16-64px, .svg for 128px+ |
Please note: This section is incomplete |
|
Mac OS X ![]() |
App and Document Icons | 512px (OS X 10.5+), 256px (OS X 10.5+), 128px, 32px, 16px |
.icns | 16px version is used list views, 128px in the dock whilst 512px(10.5 and above) is only seen in coverflow |
|
| Menubar Icon | Max 22px height×any width | .png,.tiff or .pdf | The convention is for greyscale only - use colour sparingly for attention/notification states |
||
| Toolbar Icon | 32px (default), 24px (small size) |
.icns, .pdf, multipage .tiff or .png | The 'small size' is shown when the option is chosen via 'Customise Toolbar' |
||
Safari ![]() |
Extension Icon | 32px, 48px |
Icon-32.png Icon-48.png |
Safari 5+ only. |
|
| Home Screen Icon | 114px (20px) | apple-touch-icon.png or apple-touch-icon-precomposed.png |
Corner radius is given in (brackets) For iPhone and iPad when adding a site to the home screen. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png"> |
||
Windows ![]() |
App and Document Icons | 256px (Vista+), 128px (XP+), 48px1 40px, 32px, 24px, 16px |
.ico |
1 - Used in the quick launch area (Windows 7 onwards). If a 40px resource isn't supplied then Windows will resize the 48px resource. |
|
| Toolbar Icons | 48px, 32px |
.png or .bmp | Dialog/Wizard Icons | 32px, 24px 16px |
Illustrator CS5 Template
You can download a template for iPhone and iPad icons, whilst this post has more details.









