App Icon Sizes

Before you can publish your app in the app store, Apple requires that you make icons in many different sizes for different devices and purposes. You must include these icons in your app and with your app store submission. The sizes tend to change from year to year as new devices get released and old ones get retired.

Icons must come in different size factors.

• 1x icons are for the original non-retina phones and iPads. 
• 2x icons are for retina iPads and newer phones like 6*, 7*, and 8*. These icons have twice as many pixels in each direction (four times as many pixels overall).
• 3x icons are for the iPhone X, 10, 11, and 12. These icons have three times as many pixels in each direction (nine times as many overall).

Icons also have different purposes:

• Home screen
• Spotlight (search)
• Settings (smaller for a list)
• Notification (very small for a small popup window)
• App store (very large icons for your app store information page)

An example. If an icon must come in 40 px size in 1x, 2x, and 3x size factors, then you'll need a 40x40 icon, an 80x80 icon, and a 120x120 icon.

There are two places to get information about which icons are required. One is the Apple developer web site: https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/. The other is within Xcode. Since most of you can't run Xcode from home (no Mac), I'm showing you the Appicon screen within Xcode here. (Click on the image to view it larger.)

Your assignment is to make a list of all the icons sizes you'll need to make in Adobe Illustrator as part of your app. List the sizes in increasing order from smallest to largest. Make a table in Google Docs. In one column, put the icon size. In another column, put the purpose or use of this icon size. There may be multiple uses for the same icon size. For example, note that a 40px icon at 3x will be 120px, and a 60px icon at 2x will also be 120px, so you'd only need to make one 120px icon in Adobe Illustrator, then you can use that icon for both of the other purposes.

Create this table in Google Docs and share it with me at mbrautigam@metroed.net. This is an academic assignment, so it has the potential to raise (or lower) your grade a lot.

After you have created the table in Google Docs, use the information to create an HTML page with an HTML table that has the same information. This is a technical assignment, in addition to the academic assignment. You can turn in the homework on the homework upload page http://mobileapps1920.svctestudents.org/submit/homework.php. 

❧