Apple device icon sizes

What size is apple touch icon when no size specified

I have read that there are many apple touch icon size.

In the theme i have bought, my code look like that :

So the question is : what size should the icon be, if no size specified, and how the thevice will handle it ?

My guess, i will make the icon 144×144 and all the above will be scale down appropriately !

1 Answer 1

According to this Apple Developer page, if no size is specified, it defaults to 57×57. but I believe the device will scale it appropriately if you have a larger icon in there, so 144×144 would work.

If you have access to the code though, why don’t you change what’s in there and specify the different sizes? That way each device will only download the appropriately-sized image for its screen and save some bandwidth (which is important on mobile devices that may be on slow 3G or even pre-3G connections).

One caveat is that really old devices do not understand the «sizes» attribute and will end up loading the last specified element. so you should keep the 57×57 icon at the bottom of the list.

Lastly, note that the filenames in your first sample code can be changed; if «apple-touch-icon-114×114.png» makes more sense to you than «apple-touch-icon-iphone4.png», feel free to use that (or whatever you prefer) instead. Just make sure the URL in the href attribute matches the file name you’re using! The only concern with this is to make sure you have a file that matches one of the four default images so that any page that doesn’t have the apple-touch-icon links specified will still have a default. The four images are (in the order they’re checked):

Источник

Safari Web Content Guide

Configuring Web Applications

A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.

For example, you can specify an icon for your web application used to represent it when added to the Home screen on iOS, as described in Specifying a Webpage Icon for Web Clip . You can also minimize the Safari on iOS user interface, as described in Changing the Status Bar Appearance and Hiding Safari User Interface Components , when your web application is launched from the Home screen. These are all optional settings that when added to your web content are ignored by other platforms.

Read Viewport Settings for Web Applications for how to set the viewport for web applications on iOS.

Specifying a Webpage Icon for Web Clip

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png

To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

In the above example, replace custom_icon.png with your icon filename.

To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

The icon that is the most appropriate size for the device is used. See the “Graphics” chapter of iOS Human Interface Guidelines for current icon sizes and recommendations.

If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon. prefix. For example, if the appropriate icon size for the device is 58 x 58, the system searches for filenames in the following order:

Note: Safari on iOS 7 doesn’t add effects to icons. Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix. See First Steps: Identifying Your App in iTunes Connect for details.

Specifying a Launch Screen Image

On iOS, similar to native applications, you can specify a launch screen image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in:

In the above example, replace launch.png with your startup screen filename. See the “Graphics” chapter of iOS Human Interface Guidelines for current launch screen sizes and recommendations.

Adding a Launch Icon Title

On iOS, you can specify a web application title for the launch icon. By default, the tag is used. To set a different title, add a meta tag to the webpage, as in:

In the above example, replace AppTitle with your title.

Hiding Safari User Interface Components

On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen. Read Changing the Status Bar Appearance for how to minimize the status bar.

Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode. For example, the following HTML displays web content using standalone mode.

You can determine whether a webpage is displaying in standalone mode using the window.navigator.standalone read-only Boolean JavaScript property. For more on standalone mode, see apple-mobile-web-app-capable .

Changing the Status Bar Appearance

If your web application displays in standalone mode like that of a native application, you can minimize the status bar that is displayed at the top of the screen on iOS. Do so using the status-bar-style meta tag.

This meta tag has no effect unless you first specify standalone mode as described in Hiding Safari User Interface Components . Then use the status bar style meta tag, apple-mobile-web-app-status-bar-style , to change the appearance of the status bar depending on your application needs. For example, if you want to use the entire screen, set the status bar style to translucent black.

For example, the following HTML sets the background color of the status bar to black:

For more on status bar appearance, see the “UI Bars” chapter of iOS Human Interface Guidelines .

Linking to Other Native Apps

Your web application can link to other built-in iOS apps by creating a link with a special URL. Available functionality includes calling a phone number, sending an SMS or iMessage, and opening a YouTube video in its native app if it is installed. For example, to link to a phone number, structure an anchor element in the following format:

For a complete look of these capabilities, see Apple URL Scheme Reference.

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-12-12

Источник

Guide to App Store Icons: Requirements, Best Practices and Tips

Imagine that you are opening App Store seeking out new apps you may like – some keywords in a search bar, quick scanning – and the choice is made – you are on the selected app page deciding whether to download it or not. What caught your eye and determined your choice?

Considering the fact that human brain processes visual information much faster than text, the way mobile icons look must be a governing factor for ASO. In this article, we will give you a brief overview of what requirements a “good” mobile icon must meet. We’ll also share best practices, discuss variations of styles and offer a couple of handy icon optimization tips to start with.

Download Complete Guide to Mobile Icons

Mobile icons give us the first impression and therefore they are the gateway to the app. Being one of the most impactful app store product page elements, icons help you grow an app organically .

On average, mobile icons have 10-25% potential for conversion increase, and in some cases, your “tap through rate” may skyrocket.

That is why an optimized app icon is of crucial importanc e for app store optimization.

Requirements for App Store Icon Sizes

No matter how well-thought-out your icon is, it has to meet the technical requirements posed by Apple or Google . Both companies provide detailed descriptions of what they expect from a right mobile icon from size to the overall user experience . Below you will find app store icon size requirements (Note: google play icon size differs) .

App Icon Sizes

Each app is supposed to have a set of small icons for the Home screen and a larger icon for the App Store itself.

Here’s the App Store icons size table for different Apple devices :

Device or Context	Icon Size
iPhone	180px × 180px (60pt × 60pt @3x) 120px × 120px (60pt × 60pt @2x)
iPad Pro	167px × 167px (83.5pt × 83.5pt @2x)
iPad, iPad mini	152px × 152px (76pt × 76pt @2x)
App Store	1024px × 1024px (1024pt × 1024pt @1x)

App Icon Attributes

All app icons should adhere to the following specifications .

Attribute	Value
Format	PNG
Color space	sRGB or P3 (see Color Management)
Layers	Flattened with no transparency
Resolution	Varies (see Image Size and Resolution
Shape	Square with no rounded corners

To publish your Store Listing in Google Play store, a high-resolution icon is required. The high-res icon does not replace your app’s launcher icon but should be a higher-fidelity, higher-resolution version that follows these design guidelines:

Google Play Icon Size

• 32-bit PNG (with alpha)
• Dimensions: 512px by 512px
• Maximum file size: 1024KB

Android Launcher Icon Size

480 dpi

Android launcher icon size	MDPI (Baseline)	XXHDPI
Scale	1 x	3 x
DPI
App Launcher Icons	48 px	144 px
Action bar Icons	32 px (24px inset)	96 px

Android launcher icon size

Android launcher icon size need five separate sizes for different screen pixel densities.

The App Store and Google Play have different requirements and recommendations for a mobile icon design. Android Google Play icon size has different UI layouts. Regardless of the OS for which you are creating the application, a good icon does not just grab the attention of app store visitors instantly, it also communicates your app’s quality and purpose.

Getting Started with Mobile Icons Optimization

How do we make sure we use an app icon that drives results?

Core elements of converting mobile icons are simplicity, lack of excess visual components, ability to stand out among competitors without losing touch with the conventional principles of your store category.

Learn all the latest App Store Optimization trends for icons (colors, styles, best art ideas) in the App Store and Google Play Store in “ASO Benchmarks & Trends. Mobile Games.”

How can you make sure that you observe all of the above principles? The right place to look for the answer is A/B testing . The most difficult part of it is generating variations .

For a start, you can simply review some of the top performing apps across your categories to find the styles you could try in the design of your mobile app icon. But before you start you should ask yourself:

• Does your icon tell the story and sell the unique features of your app?

It’s essential to ensure that the users understand the message behind your mobile icons. For example, if we look at selfie app icons, we’ll see that the vast majority feature camera, lens or a lens-like visual.

Music app icons contain musical notes, sound waves or equalizers. The cooking utilities, aprons, or chef’s hats appear on recipe apps icons respectively.

These associations may look banal but using the wrong ones can pose a real threat to conversions. For instance, Darby (an app with DIY videos) discovered that their icon misled their customers. A “play” sign in the icon made the audience believe Darby was a video editing app. A/B tests helped solve this problem and the icon was corrected.

Each app also has its strong point s. Identifying and highlighting them is essential. So when developing an app store optimization strategy, you should make sure the app stands out .

If your brand is already visible in your target market, using it in the icon is a must. It will give the app credibility and increase the trust of users.

For example, if you search for “racing”, you will notice that the results contain some icons having a big publisher’s logo in the corner. You can find a few examples below.

• Do your mobile icons stand the competition in search?

Using your target and related keywords you can help you see your app’s position in search . Look at its main competitors. Do their icons look the same? What makes yours stand out?

Speaking about optimization, it’s important to keep in mind that mobile icons play crucial role first and foremost at the app discovery stage. As soon as app store visitors get to the product page, they stop paying so much attention to the icon.

That’s why the easiest way to improve an icon is to run a series of category tests on an App store and choose the version that performs best in the tough competitive environment.

Colors and Styles of Mobile Icons

Choosing your icon style and color is close to a full-scale branding decision . The thing is mobile icons actually represent your company in app stores and serious discrepancies between the app design and your corporate identity can discourage even loyal customers.

When you create an app, you definitely know who you are creating it for. Age, gender, location, language , and other characteristics of your prospects impact the app design.

The same rule applies to mobile icons, and the more precise your targeting is the more installs you can expect. It seems obvious that the icon style of a kids game will be drastically different from an icon of an accounting app in terms of colors and composition .

Colors

Many companies are recognized by colors. The same works for apps. That is why choosing the color for your mobile icon is so important. What colors work best? Unfortunately, there is no right answer. Though most colors have meanings or at least associations, and these may guide your decision.

Blue is a popular color with many big companies (Facebook, Twitter, Visa, etc.). It has literally become a representation of trust, honesty, loyalty, security, and tranquility . This color is often used on logos and icons of the products intended for international use as it hasn’t got any negative cultural interpretations.

Green is mainly associated with money and nature that is why it is preferred by the developers of 2 app categories:

• financial services;
• eco-friendly behavior promoters.

Purple is more of a female color (that’s why it is so popular with selfie app designers). Red is bold and energetic, orange is cheerful, yellow is warm, and green is peaceful, so you can pick red for a sports app , and green for some health tracker .

However, it’s important to be careful and account all possible associations and cultural interpretations that go with the chosen color (except blue, as you can guess).

Mobile Icon Optimization: Best Practices

Even a well-designed icon based on your branding rules can’t guarantee that you’ll win millions of apps in an app store. Only data-driven approach , testing and optimizing different elements of an icon (colors, backgrounds, graphics, compositions etc.), allow you to boost the downloads of your apps and make the most of your mobile icons.

Be sure that the selected test variations have significant differences.

Minor changes like a shade or a different angle of the graphics won’t fit for a split test , as they are not likely to show any serious difference in conversion.

Here are some basic optimization tips:

It’s no doubt you have loads of ideas of what to place on your icon. Try variations with the basic concepts keeping the number of graphical elements to a minimum. Or better, stick to one and check if a lighter design really converts better.

1024 × 1024-pixel canvas is a challenge in itself. So try the design out on the device in multiple contexts and sizes. Make sure your mobile icons look good against a variety of backgrounds.

There are lots of nice color combinations in the world and your designer surely knows them well. The difficult question is, which of these nice combinations drive installs. Test and see if a mild pastel background can highlight the main icon element and boost conversions better than a bold contrast one.

1. Let your graphics speak for you

There’s a strange tendency among app developers – quite many of them tend to place the app’s name or some other text on the mobile icon. Why? There’s a plenty of space in the app’s title and description areas .

Of course, many apps successfully use words or letters (sometimes branded, sometimes not) in their mobile icons. If you would like to join the ‘literal’ club, don’t forget to test if extra letters on the icon convert better than the graphic language .

I f you choose to use just one meaningful letter associated with your brand it can become a good app icon. Though using it in the context as a logo is still not recommended.

Logo and mobile icons have some similarities but they are also different in many aspects. So, it’s very important to understand that an app icon is not a logo. Logos are vector images and icons are raster ones , logos don’t have to be square but they need to look good on letterheads, etc.

The approach, the tools, and the process of creating these images are absolutely different and so are their success criteria. If you still believe that your logo can become a mobile icon be sure to test it and guarantee it delivers the value apart from the brand message .

Test borders for your app icon, it can make your icon outlined against any background and increase its visibility and appeal.

History repeats itself, so analyze your competitors and do something different . Emulating the leaders is a safe but a tricky route to go down. Your uniqueness is one of the keys to success. Start with the colors as they do make the difference but don’t neglect the research not to end up in a hole.

Источник