icon slayer icon  Icon Slayer

Creates properly sized icons for iOS and Android apps from a single "artwork" image file. Exported icons are neatly organized into folders. Also generates Mac OS X ICNS and Windows ICO / favorite.ico files.

Load your artwork, choose your options, then export for a tidy collection of files "ready to go" into your development environment.

skin webpage audio player

The following chart outlines the icon sizes and additional information about each kind of icon for Apple iOS, Android and Universal Windows Platform (UWP) that Icon Slayer outputs.

- Mac OS X ICNS

- Windows ICO

- Favicon ICO

- Universal Windows Platform (UWP)

 

 

iOS 7 (and up)

The following information was derived from: https://designcode.io/iosdesign-guidelines

Size File Name Used For Notes
29 29pt@1x.png
Icon-Settings-iPad.png
iPad Settings
58 29pt@2x.png
Icon-Settings-iPad@2x.png
Icon-Settings-iPhone@2x.png
iPhone, iPad Settings
40 40pt@1x.png
Icon-Spotlight-iPad.png
iPad Spotlight
76 76pt@1x.png
Icon-App-iPad.png
iPad App Icon
80 40pt@2x.png
Icon-Spotlight-iPad@2x.png
Icon-Spotlight-iPhone@2x.png
iPhone, iPad Spotlight
87 29pt@3x.png
Icon-Settings-iPhone@3x.png
iPhone Settings
120 40pt@3x.png
Icon-Spotlight-iPhone@3x.png
60pt@2x.png
Icon-App-iPhone@2x.png
iPhone App Icon
Spotlight
152 76pt@2x.png
Icon-App-iPad@2x.png
iPad App Icon
167

76pt@3x.png
83.5pt@2x.png
Icon-App-iPad-Pro.png

iPad Pro App Icon
180 60pt@3x.png
Icon-App-iPhone.png
iPhone App Icon

iPhone-only Apps

The following information was derived from: http://developer.apple.com/library/ios/#qa/qa1686/_index.html

Size File Name Used For Required Status Notes
29x29 Icon-Small.png Spotlight and Settings Optional but recommended  
50x50 Icon-Small-50.png Spotlight Recommended if you have a Settings bundle  
57x57 Icon.png App Store and Home screen Required  
58x58 Icon-Small@2x.png Spotlight and Settings (Retina) Recommended if you have a Settings bundle  
72x72 Icon-72.png Home screen Optional but recommended  
114x114 Icon@2x.png Home screen (Retina) Optional but recommended  
512x512 iTunesArtwork Ad Hoc iTunes Optional but recommended File should be in png format, but name it without the .png extension
1024x1024 iTunesArtwork@2x Ad Hoc iTunes (Retina) Optional but recommended File should be in png format, but name it without the .png extension

iPad-only Apps

Image Size File Name Used For Required Status Notes
29x29 Icon-Small.png Settings on iPad Recommended if you have a Settings bundle, otherwise optional but recommended  
58x58 Icon-Small@2x.png Settings on iPad (Retina) Recommended if you have a Settings bundle, otherwise optional but recommended  
50x50 Icon-Small-50.png Spotlight on iPad Optional but recommended  
100x100 Icon-Small-50@2x.png Spotlight on iPad (Retina) Optional but recommended  
72x72 Icon-72.png App Store and Home screen on iPad Required  
144x144 Icon-72@2x.png App Store and Home screen on iPad (Retina) Required  
512x512 iTunesArtwork Ad Hoc iTunes Optional but recommended File should be in png format, but name it without the .png extension
1024x1024 iTunesArtwork@2x Ad Hoc iTunes Optional but recommended File should be in png format, but name it without the .png extension

iOS Universal Apps

Image Size File Name Used For Required Status Notes
29x29 Icon-Small.png Settings and Spotlight Recommended if you have a Settings bundle  
50x50 Icon-Small-50.png Spotlight Optional but recommended  
57x57 Icon.png App Store and the Home screen Required  
58x58 Icon-Small@2x.png Spotlight and Settings Recommended if you have a Settings bundle  
72x72 Icon-72.png App Store and Home screen Required  
114x114 Icon@2x.png Home screen Optional but recommended  
512x512 iTunesArtwork Ad Hoc iTunes Optional but recommended File should be in png format, but name it without the .png extension

iOS Web Clip Icons

These are shown on the device home screen when saving a bookmark. This is similar in nature to the "favicon" for websites. The "-precomposed" portion of the filename prevents Apple from automatically adding gloss, rounded corners and drop shadows.

Refer to the "Webpage Icon" Apple documentation page for additional details.

Image Size (px) File Name Embed Code
57x57 apple-touch-icon-precomposed.png <link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png"/>
72x72 apple-touch-icon-72x72-precomposed.png <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" />
114x114 apple-touch-icon-114x114-precomposed.png <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" />
144x144 apple-touch-icon-144x144-precomposed.png <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" />

Android Apps

The following information was derived from: http://developer.android.com/guide/practices/ui_guidelines/icon_design.html

Asset Type Prefix Sizes
Google Market hi-res market_ 512 xhdpi
Button Status / Notify btn_stat_notify 24 ldpi
32 mdpi
48 hdpi
64 xhdpi
Launcher icons ic_launcher 36 ldpi
48 mdpi
72 hdpi
96 xhdpi
Menu icons and Action Bar icons ic_menu 36 ldpi
36 ldpi_v9
18 ldpi_v11
48 mdpi
48 mdpi_v9
24 mdpi_v11
96 hdpi
72 hdpi_v9
36 hdpi_v11
96 xhdpi
96 xhdpi_v9
48 xhdpi_v11
Status bar icons ic_stat_notify 19 ldpi
12 ldpi_v9
18 ldpi_v11
25 mdpi
16 mdpi_v9
24 mdpi_v11
48 hdpi
24 hdpi_v9
36 hdpi_v11
50 xhdpi
32 xhdpi_v9
48 xhdpi_v11
Tab icons ic_tab 24 ldpi
24 ldpi_v5
32 mdpi
32 mdpi_v5
48 hdpi
48 hdpi_v5
Dialog icons ic_dialog 24 ldpi
32 mdpi
48 hdpi
Lists ic_list 24 ldpi
32 mdpi
48 hdpi

 

 

Universal Windows Platform (UWP)

The following information was derived from:
https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/tiles-and-notifications-app-assets

Splash Screen sizes derived from:
https://msdn.microsoft.com/library/windows/apps/br211467

Based on the description provided here, the system selects appropriate images based on the following scheme:

<name>.scale-<scale>.<ext>

Where <name> can be anything you want. According to the guide, they're recommending using a naming convention of "AppNameSmallTile.scale-XXX.png". I found this to be rather confusing, so I decided to just stick with naming the images according to the attribute definition, which I believe is less confusing.

When referencing an image in your code, just use NAME.EXT. The ".scale-XXX" portion of the file name is not included in the code. The system automatically selects the appropriate image/scale as needed. Icon Slayer uses a naming convention that matches the element attribute, I believe this is least confusing.

Example:

<uap:VisualElements
Square150x150Logo="Assets\Square150x150Logo.png"
Square44x44Logo="Assets\Square44x44Logo.png">

 

Size File Name Notes
71 Square71x71Logo.scale-100.png Smal Tile
89 Square71x71Logo.scale-125.png  
107 Square71x71Logo.scale-150.png  
142 Square71x71Logo.scale-200.png  
284 Square71x71Logo.scale-400.png  
150 Square150x150Logo.scale-100.png Medium Tile
188 Square150x150Logo.scale-125.png  
225 Square150x150Logo.scale-150.png  
300 Square150x150Logo.scale-200.png  
600 Square150x150Logo.scale-400.png  
310 Square310x310Logo.scale-100.png Large Tile
388 Square310x310Logo.scale-125.png  
465 Square310x310Logo.scale-150.png  
620 Square310x310Logo.scale-200.png  
240 Square310x310Logo.scale-400.png  
310 x 150 Square310x150Logo.scale-100.png Wide Tile
388 x 188 Square310x150Logo.scale-125.png  
465 x 225 Square310x150Logo.scale-150.png  
620 x 300 Square310x150Logo.scale-200.png  
1240 x 600 Square310x150Logo.scale-400.png  
44 Square44x44Logo.scale-100.png App List (icon)
55 Square44x44Logo.scale-125.png  
66 Square44x44Logo.scale-150.png  
88 Square44x44Logo.scale-200.png  
176 Square44x44Logo.scale-400.png  
16 Square44x44Logo.targetsize-16.png Target Size Icon
20 Square44x44Logo.targetsize-20.png  
24 Square44x44Logo.targetsize-24.png  
30 Square44x44Logo.targetsize-30.png  
32 Square44x44Logo.targetsize-32.png  
36 Square44x44Logo.targetsize-36.png  
40 Square44x44Logo.targetsize-40.png  
48 Square44x44Logo.targetsize-48.png  
60 Square44x44Logo.targetsize-60.png  
64 Square44x44Logo.targetsize-64.png  
72 Square44x44Logo.targetsize-72.png  
80 Square44x44Logo.targetsize-80.png  
96 Square44x44Logo.targetsize-96.png  
256 Square44x44Logo.targetsize-256.png  
620 x 300 SplashScreen.screen-100.png Splash Screen
868 x 420 SplashScreen.screen-140.png  
1116 x 540 SplashScreen.screen-180.png  

 

Contact

Question, comments, suggestions? Send me and email.

Download Icon Slayer ($15 USD)

(aka: Help keep the lights on :)


Get Icon Slayer
for Windows

Get Icon Slayer
for Macintosh

 

Usage + Known Issues

- You can load PNG, JPG or BMP images. PNG files can have transparency.

- Flatten source PNGs. Some browsers require source PNG files to be "flattened", meaning that PNG files should not have "layer" information in them. The PNG can have an alpha channel (where parts of the image is invisible), but "layer" information can be problematic for some browsers. Flattening maintains transparency, but just reduces all layers to a single layer.

- Reduce image dimensions. Source PNGs should be no larger than 1240 x 1240 pixels. The smaller your source file, the faster things will process. A good rule of thumb is to make your source file as big as the biggest icon you need.

- Safari on Mac can freeze during export. Icon Slayer uses Adobe Flash, and this is a known problem that Adobe has not resolved. Try using another browser such as Mozilla Firefox or Google Chrome.

 

Release Notes

v22 - Nov. 23, 2016
- Attempted bug fix for some browsers not being able to save icons.

v20 - Nov. 11, 2016
- iOS: iTunesArtwork files converted to RGB (no alpha) for issues on iTunes Connect where RGBA (with alpha) files are rejected.
- Updated image processor(s).

v19 - Nov. 1, 2016
- Corrected some icon naming inconsistencies for iOS.

v18 - Oct. 14, 2016
- Updated iOS and Android icon naming conventions.
- Included legacy iOS naming conventions.

v15 - Oct. 3, 2016
- Added icon support for Universal Windows Platform (UWP)

v14 - Oct. 1, 2016
- Added ability to manually enter HEX value in the color picker.
- Opener loads existing color into color picker.

v12 - Jun. 29, 2016
- Fixed slider issues from v11 release.

v11 - Jun. 26, 2016
- Added image cropper.
- Added background color option for loaded PNG images with transparency.

v0.2 - Apr. 6, 2016
- Added Mac ICNS, Windows ICO, favicon ICO formats
- Updated IOS icon sizes / naming conventions.
- Better Image production.
- Smoothing slider
- Better icon transparency support

v0.4 - Oct 22, 2012
- initial release.

 

Example Output

The following image is a screen-grab of all of the icons generated with Android and iOS checked.

Icon output example

 

 

© Michael Gieson