- macOS (Mac OS X) ICNS

- Windows ICO

- Favicon ICO

iOS

The following information was derived from generating a iOS project in Xcode version 8.1 (8B62).

Replace the "AppIcon.appiconset" folder within the "Assets.xcassets" folder within your Xcode project:

[project anme]/Assets.xcassets/AppIcon.appiconset

Points

File Name

Pixels

20pt

iPhone Notification
iOS 7-10

iphone-notification-20pt@2x

40

iphone-notification-20pt@3x

60

29pt

iPhone
Spotlight iOS 5,6
Settings iOS 5-10

iphone-spotlight-settings-29pt@2x

58

iphone-spotlight-settings-29pt@3x

87

40pt

iPhone Spotlight
iOS 7-10

iphone-spotlight-40pt@2x

80

iphone-spotlight-40pt@3x

120

60pt

iPhone App
iOS 7-10

iphone-app-60pt@2x

120

iphone-app-60pt@3x

180

20pt

iPad Notifications
iOS 7-10

ipad-notifications-20pt@1x

20

ipad-notifications-20pt@2x

40

29pt

iPad Settings
iOS 5-10

ipad-settings-29pt@1x

29

ipad-settings-29pt@2x

58

40pt

iPad Spotlight
iOS 7-10

ipad-spotlight-40pt@1x

40

ipad-spotlight-40pt@2x

80

76pt

iPad App
iOS 7-10

ipad-app-76pt@1x

76

ipad-app-76pt@2x

152

83.5pt

iPad Pro App
iOS 9-10

ipad-pro-app-83.5pt@2x

167

Web App / Progressive Web App

An Icon is 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.

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.

Contact

Download Icon Slayer ($15 USD)

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.