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.
Icon generator free download - Icon Generator, Anything's an Icon, Icon Sushi, and many more programs.
3500+ amazing blocks Mobirise Builder offers 3500+ website blocks in 5 free and 75+ premium HTML themes and 200+ home page templates that include sliders, galleries with lightbox, articles, counters, countdowns, full-screen intros, images & videos, features, data tables & pricing tables, progress bar & cycles, timelines, tabs & accordions, call-to-action, forms, Google maps, social blocks. Free Online Icon Maker. Create Icon Set in 30 seconds! Download icons for free. Icon creator Software. Icon-48.png Icon-55.png Icon-80.png Icon-88.png Icon-172.png Icon-196.png App Icon Maker / App Icon Resizer AppIconMaker.co is a cloud service free icon maker which optimizes your app icon with proficient speed and generates icons of all sizes to be used on apps for different app stores.
- iOS
- Android
- macOS (Mac OS X) ICNS
- Windows ICO
- Favicon ICO
- Web App / Progressive Web App
- Universal Windows Platform (UWP)
iOS
Covers iOS apps up to iOS v10 for iPhone 4-5-6-7, iPad, iPad Pro, iPad Mini.
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:
Weather guru accurate weather forecasts 2 3 4. [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.
Refer to the 'Webpage Icon' Apple documentation page for additional details.
Apple invented the iOS Web Clip idea, but it has been picked up by Chrome (and others).
We've also included a manifest.json file for you as a starting point for your Progressive Web App.
See the 'index.html' source code for how to include the icons in your page(s).
Android Apps
The following information was derived from: http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
![App App](https://static.macupdate.com/products/59967/l/app-icon-generator-logo.png?v=1593702597)
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
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
https://msdn.microsoft.com/library/windows/apps/br211467
![Icon Icon](https://is2-ssl.mzstatic.com/image/thumb/Purple114/v4/52/c4/fa/52c4fa48-1df6-59ae-ea19-4c7dd48f40b5/pr_source.png/800x500bb.jpg)
Based on the description provided here, the system selects appropriate images based on the following scheme:
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:
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 |
As you know, there are many Android and iOS devices, each of them with a different screen size and available memory.
You could create a single icon but then you'll consume more memory that you should or you'll create a lower image than you should.
This is why it's so important to create an icon set to adapt a single icon to the different screen size of Android and iOS screens.
Drag your icon over the grey box with the text: “Drag and drop your icon here”. You will see a preview of your image. Now press the “Download” button to download your icons.
After extracting the zip file, you can simply copy the Android icons in your Android project and the iOS icons in your iOS project.
For Android there are 5 resolutions that you should consider and so in your project there are 5 folder (one for each resolution):
- drawable-mdpi
- drawable-hdpi
- drawable-xhdpi
- drawable-xxhdpi
- drawable-xxxhdpi
The idea is to generate an icon for each folder, from the smallest one (drawable-mdpi) to the biggest (drawable-xxxhdpi). Doing this you will be sure to have the best icon for each screen resolution, consuming the minimum amount of memory.
For iOS we need to create 3 versions for each icon, so if the filename is 'youricon.png', this tool will generate the icons '[email protected]' '[email protected]'. iOS will use the best icon according to the device
In total, given your original icon, you should resize and generate 8 icons to consider all the resolutions on Android and iOS.
Moneyline plus 4 01 30. At this point you have 2 options:
- Spend 1 hour to manually resize your icons
- Use Icon Generator that automatically will create your icons in just few seconds.
App Icon Generator 1 2 2 Download Free Download
How to use Icon generator
Drag your icon over the grey box with the text: “Drag and drop your icon here”. You will see a preview of your icon. Select if you want to generate the icons for Android and/or iOS (by default the tools will generate the icons for Android and iOS).
If you want you can rename the file so that the icon set will use the name you have chosen
Now press the “Download” button to download your icons. In just an instant your icons will be ready to be downloaded inside a zip file.
Inside the zip file, the icons are already their correct folders, so you just need to copy these folders inside your Android and iOS projects.
App Icon Generator 1 2 2 Download Free Version
I hope you enjoy this free tool and if you like I'd appreciate if you could buy me a coffee :)