When designing app icons for iOS, I recommend to use the official app icon templates provided by Apple. Since iOS 7, app icons have been using the shape of a superellipse. The old simple radii values for rounded corners are gone. When rendered on a device, iOS applies various effects to app icons. IPhone 4, 4S, 5, 5C, 5S, 6, 6SE, 6S, 7, 8Īpp icons assets are generally added to the application package as plain, squared PNG files in various dimensions. Because its screen has a lower pixel resolution than what would be a natural resolution, the rendered content is automatically resized to approximately 87% of the original size (from 2208 x 1242 pixels to fit the display resolution of 1920 x 1080 pixels) for the regular Plus models. Rendered pixels and physical pixels are equal on all iOS devices, with one exception: the Retina HD screen of the iPhone 6-, 7-, 8-Plus and iPhone X, XS and XS Max. Depending on the screens pixel density, a point can contain multiple pixels (e.g., 1 pt contains 2 x 2 pixels on a regular retina display). Points are a resolution-independent measurement. The more pixels can be fitted into a specific screen size, the higher the PPI (pixels-per-inch), and the clearer the rendered content becomes. Pixels are the smallest physical element that we can control on a digital display.
![ios app icon generator sketch ios app icon generator sketch](https://cdn3d.iconscout.com/3d/free/preview/ios-calculator-2978357-2476734@0.png)
I explain how to use them in the next section. Tip: if you have more than one icon to re-generate, use a slice preset. Add a new size to your slice (see Explanation of how the slice is set up below)Īgain, you have a new icon set in seconds!.You’ve generated your new icon set in a fraction of a second! Adding a new size to your icon Make the changes to your icon on your artboard.Maintaining your icon Changing your icon design You can be creative with slice naming, and in part three I’ll share some tips to help you export icons directly into Xcode. If you always use icon, your exported pngs will always have the same names, which will make it much quicker to set up new icon sets in Xcode. icon will form the name of your individual icons. my-icon is the folder name, and you can call that whatever you like. For example, if you named your Slice foo/bar.png, it would first create a folder named foo and then create a image named bar.png in there. From the Sketch documentation:Ī neat trick: if you include a slash (/) in the layer name, it will place that slice in a new folder. If you want to keep it simple, go to second part of the article to import them in to Xcode. If you want to learn more about maintaining your icon sets and how it all works, keep reading. Congratulations! They’re ready to be imported into Xcode. Look in your output folder and you’ll see a folder called my-icon that contains a full set of icons. In the second part I’ll describe how to set up your icon sets in Xcode to link icon files to their placeholders in a flash. I’ll give you some tips to speed up the process even more using presets, and I’ll explain how it all works. I’ll tell you how to regenerate your icon set if your design changes, or if you need to add a new size. In this part I’ll go through how to set up your icon on an artboard in Sketch, and how to slice it so you can export your whole icon set at once. You don’t need to be a designer (although you can get your designer to do the Sketch set up), and you don’t need any tools apart from Sketch and Xcode. I’ve condensed the process of exporting an icon from Sketch into Xcode down to less than a minute, even for a brand new icon. Before you know it you’ve spent hours creating, copying and pasting different icons into Xcode. The real killer is that this isn’t a one-off job, you have to create them again every time your icon design changes, and every time you need a new icon. The last icon set I created in Xcode needed 18 different individual icon sizes.
![ios app icon generator sketch ios app icon generator sketch](https://i.pinimg.com/originals/a4/94/fa/a494faf86da736efaf0a387ee0aa0839.png)
Generating icons for your iOS project can be time consuming.