Part four in a series of four blog posts from mag+ product expert, Anders Odevik, discusses the importance of, and best practices for designing your icon. These tips and tricks will prove useful for anyone making a digital magazine.
The icon of your app is the first visual message that you send to users browsing in the App Store. It is therefore, extremely important. If your app is a Newsstand app you will have a magazine cover as your icon in the App Store. If you have a standard app (non-newsstand app) you will use the square icon with the rounded corners (screen shot below).
Standard App Icon
There are several things to think about when creating the icon for your standard app. In mag+ Publish, the web interface where you upload the assets when building your app, you will be able to upload two versions of your icon, one for iPhone (114x114px) and one for iPad (144x144px). These icons are going to be used for the app on the desktop of the iPhone/iPad. The general rule here is to avoid using text and detailed graphics, because of the small size of the icon. You should also avoid using a logo that includes the name of your publication, as the icon will be displayed with the name of the app underneath (no need to repeat the name).
My recommendation here is to use a graphical element from your logo or publication. The screenshot of the Chicago Tribune icon (above) is a perfect example of using a graphical element associated with the brand in the icon. Keep it simple while trying to catch the graphic identity of your publication. It’s not the easiest thing to do on just a few pixels.
Once your icon is ready for the app itself we can start looking at the icon that is going to show in the App Store. This icon needs to be 1024x1024px in size. Try to use the same design as the app icon you created before. This icon will be downsized and shown in many different sizes. Be sure that it has the correct resolution so that it looks good when used in its full size. Remember that this icon can only be changed when submitting an update of the app.
The Newsstand Image
For Newsstand apps it is the Newsstand image that is used. The Newsstand image must be at least 1024px in width or height and the max ratio is 1:2 to 2:1. Your cover should fit perfectly here, but there are still some things to consider when creating your cover art.
When building the Newsstand app in mag+ Publish, you will upload a default Newsstand image for your app. This image is going to be used when the user has installed the app on their iPad but has not downloaded anything yet. As the default newsstand image is included in the binary it can only be changed by submitting an update of the app. Because of this, we recommend to use a very general version of your cover here, like a cover-sized image with your publication’s logo on it. This image, unlike the standard app icon, will not be shown together with the name of your app.
When setting up the app for the App Store you can upload the Newsstand image that you want displayed in the App Store. This Newsstand image can be changed at any time, preferably when publishing a new issue. This way, the cover image shown in the App Store will always be the latest issue. Either you change the newsstand image manually in iTunes Connect yourself, or you let mag+ Publish do it for you by using the atom-feed function.
The main reason for uploading your Newsstand image in mag+ Publish (besides being used by the atom-feed) is to show it in the in-app library and store of the app. It will also replace the default Newsstand image for the app when the user downloads that issue. Another benefit of uploading your Newsstand image in mag+ Publish is for your subscribers. New issues will be automatically downloaded to a subscriber’s iPad or iPhone. The Newsstand image uploaded in mag+ Publish will be shown in the Newsstand app on the iPad or iPhone when it has been downloaded along with the blue “New” banner generated by Apple. Check out the example of British Journal of Photography or United Hemispheres in the screen shot below.
Remember to keep it simple and know that the image will be downsized and displayed in very small sizes. If you have any questions or comments, please leave them in the comments section below!