Apple icon sizes and names

Apple icon sizes and names

Beautiful app icons are an important part of the user experience on all Apple platforms. A unique, memorable icon evokes your app and can help people recognize it at a glance on the desktop, in Finder, and in the Dock. Polished, expressive icons can also hint at an app’s personality and even its overall level of quality.

In macOS 11, app icons share a common set of visual attributes, including the rounded-rectangle shape, front-facing perspective, level position, and uniform drop shadow. Rooted in the macOS 11 design language, these attributes showcase the lifelike rendering style people expect in macOS while presenting a harmonious user experience. To download templates that specify the correct shape and drop shadow, see Apple Design Resources.

IMPORTANT When you update your app for macOS 11, use your new app icon design to replace the icon you designed for earlier versions. You can’t include two different app icons for one app, and the macOS 11 app icon style looks fine on a Mac running Catalina or earlier.

Design a beautiful icon that clearly represents your app. Combine an engaging design with an artistic interpretation of your app’s purpose that people can instantly understand.

Embrace simplicity. Find a concept or element that captures the essence of your app and express it in a simple, unique way, adding details only when doing so enhances meaning. Too many details can be hard to discern and can make the icon appear muddy, especially at smaller sizes.

Establish a single focus point. A single, centered point of interest captures the user’s attention and helps them recognize your app at a glance. Presenting multiple focus points can obscure the icon’s message.

To give people a familiar and consistent experience, prefer a design that works well across multiple platforms. If your app runs on other platforms, use a similar image for all app icons while rendering them in the style that’s appropriate for each platform. For example, in iOS and watchOS, the Mail app icon depicts the white envelope in a streamlined, graphical style; in macOS 11, the envelope includes depth and detail that communicate a realistic weight and texture.

Consider depicting a familiar tool to communicate what people use your app to do. To give context to your app’s purpose, you can use the icon background to portray the tool’s environment or the items it affects. For example, the TextEdit icon pairs a mechanical pencil with a sheet of lined paper to suggest a utilitarian writing experience. After you create a detailed, realistic image of a tool, it often works well to let it float just above the background and extend slightly past the icon boundaries. If you do this, make sure the tool remains visually unified with the background and doesn’t overwhelm the rounded-rectangle shape.

Make real objects look real. If you depict real objects in your app icon, make them look like they’re made of physical materials and have actual mass. Replicate the characteristics of substances like fabric, glass, paper, and metal to convey an object’s weight and feel. For example, the Xcode app icon features a hammer that looks like it has a steel head and polymer grip.

If text is essential for communicating your app’s purpose, consider creating a graphic abstraction of it. Actual text in an icon can be difficult to read and doesn’t support accessibility or localization. To give the impression of text without implying that people should zoom in to read it, you can create a graphic texture that suggests it.

To depict photos or parts of your app’s UI, create idealized images that emphasize the features you want people to notice. Photos are often full of details that obscure the main content when viewed at small sizes. If you want to use a photo in your icon, pick one with strongly contrasting values that make the main subject stand out. Remove unimportant details that make primary lines and shapes fuzzy or indistinct. If your app has a UI that people recognize, avoid simply replicating standard UI elements or using a screenshot in your icon. Instead, consider designing a graphic that echoes the UI and expresses the personality of your app.

Don’t use replicas of Apple hardware products. Apple products are copyrighted and can’t be reproduced in your icons or images. Avoid displaying replicas of devices, because hardware designs tend to change frequently and can make your icon look dated.

Use the drop shadow in the icon-design template. The template includes the system-defined drop shadow that helps your app icon coordinate with other macOS 11 icons.

Consider using interior shadows and highlights to add definition and realism. For example, the Mail app icon uses both shadows and highlights to give the envelope authenticity and to suggest that the flap is slightly open. In icons that include a tool that floats above a background — such as TextEdit or Xcode — interior shadows can strengthen the perception of depth and make the tool look real. Shadows and highlights should suggest a light source that faces the icon, positioned just above center and tilted slightly downward.

Avoid defining contours that suggest a shape other than a rounded rectangle. In rare cases, you might want to fine-tune the basic app icon shape, but doing so risks creating an icon that looks like it doesn’t belong in macOS 11. If you must alter the shape, prefer subtle adjustments that continue to express a rounded rectangle silhouette.

Consider adding a slight glow just inside the edges of your icon. If your app icon includes a dark reflective surface, like glass or metal, add an inner glow to make the icon stand out and prevent it from appearing to dissolve into dark backgrounds.

Keep primary content within the icon grid bounding box; keep all content within the outer bounding box. If an icon’s primary content extends beyond the icon grid bounding box, it tends to look out of place. If you overlay a tool on your icon, it works well to align the tool’s top edge with the outer bounding box and its bottom edge with the inner bounding box, as shown below.

In addition to the bounding boxes and suggested tool placement, the icon design template provides a grid to help you position items within an icon. You can also use the icon grid to ensure that centered inner elements like circles use a size that’s consistent with other icons in the system.

App Icon Attributes

All app icons should use the following specifications.

Attribute	Value
Format	PNG
Color space	sRGB (color) or Gray Gamma 2.2 (grayscale)
Layers	Flattened with transparency as appropriate
Resolution	@1x and @2x (see Image Size and Resolution)
Shape	Square with rounded corners

Don’t provide app icons in ICNS or JPEG format. The ICNS format doesn’t support features like wide color gamut or deliver the performance and efficiency you get when you use asset catalogs. JPEG doesn’t support transparency through alpha channels, and its compression can blur or distort an icon’s images. For best results, add deinterlaced PNG files to the app icon fields of your Xcode project’s asset catalog.

App Icon Sizes

Your app icon is displayed in many places, including in Finder, the Dock, Launchpad, and the App Store. To ensure that your app icon looks great everywhere people see it, provide it in the following sizes:

• 512×512 pt (512×512 px @1x, 1024×1024 px @2x)
• 256×256 pt (256×256 px @1x, 512×512 px @2x)
• 128×128 pt (128×128 px @1x, 256×256 px @2x)
• 32×32 pt (32×32 px @1x, 64×64 px @2x)
• 16×16 pt (16×16 px @1x, 32×32 px @2x)

Maintain visual consistency in all icon sizes. As icon size decreases, fine details become muddy and hard to distinguish. At the smallest sizes, it’s important to remove unnecessary features and exaggerate primary features to help the content remain clear. As you simplify icons that are visually smaller, don’t let them appear drastically different from their larger counterparts. Strive to make subtle variations that ensure the icon remains visually consistent when displayed in different environments. For example, if people drag your icon between displays with different resolutions, the icon’s appearance shouldn’t suddenly change.

The 512×512 pt Safari app icon (on the left) uses a circle of tick marks to indicate degrees; the 16×16 pt version of the icon (on the right) doesn’t include this detail.

Источник

Apple icon sizes and names

The coordinate system iOS uses to place content onscreen is based on measurements in points, which map to pixels in the display. A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x). As a result, high-resolution displays demand images with more pixels.

For example, suppose you have a standard resolution (@1x) image that’s 100px × 100px. The @2x version of this image would be 200px × 200px, and the @3x version would be 300px × 300px.

Supply high-resolution images for all artwork in your app, for all devices your app supports. Depending on the device, you accomplish this by multiplying the number of pixels in each image by a specific scale factor.

Device	Scale Factor
12.9″ iPad Pro	@2x
11″ iPad Pro	@2x
10.5″ iPad Pro	@2x
9.7″ iPad	@2x
7.9″ iPad mini 4	@2x
iPhone X S Max	@3x
iPhone X S	@3x
iPhone X R	@2x
iPhone X	@3x
iPhone 8 Plus	@3x
iPhone 8	@2x
iPhone 7 Plus	@3x
iPhone 7	@2x
iPhone 6s Plus	@3x
iPhone 6s	@2x
iPhone SE	@2x

Designing High-Resolution Artwork

Use an 8px-by-8px grid. A grid keeps lines sharp and ensures that content is as crisp as possible at all sizes, requiring less retouching and sharpening. Snap the image boundaries to the grid to minimize half pixels and blurry details that can occur when scaling down.

Produce artwork in the appropriate format. In general, use de-interlaced PNG files for bitmap/raster artwork. PNG supports transparency and, because it’s lossless, compression artifacts don’t blur important details or alter colors. It’s a good choice for intricate artwork that requires effects like shading, textures, and highlights. Use JPEG for photos. Its compression algorithm usually produces smaller sizes than lossless formats and artifacts are harder to discern in photos. Photo-realistic app icons, however, look best as PNGs. Use PDF for glyphs and other flat, vector artwork that requires high-resolution scaling.

Use the 8-bit color palette for PNG graphics that don’t require full 24-bit color. Using an 8-bit color palette reduces file size without reducing image quality. This palette is not appropriate for photos.

Optimize JPEG files to find a balance between size and quality. Most JPEG files can be compressed without noticeable degradation of the resulting image. Even a small amount of compression can save significant disk space. Experiment with compression settings on each image to find the optimal value that yields an acceptable result.

Provide alternative text labels for images and icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what’s onscreen, making navigation easier for people with visual disabilities.

Источник

Apple icon sizes and names

The coordinates system macOS uses to place content onscreen is based on measurements in points, which map to pixels in the display. A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density and a scale factor of 2.0 (referred to as @2x). As a result, high-resolution displays demand images with more pixels.

For example, suppose you have a standard resolution @1x image that’s 100px × 100px. The @2x version of this image would be 200px × 200px.

Supply high-resolution images for all your app’s artwork. You accomplish this by multiplying the number of pixels in each image by the scale factor. Append a suffix of “@2x” to your @2x image names, and insert them into @2x fields in the asset catalog of your Xcode project.

Designing High-Resolution Artwork

Produce art at the largest size you need and scale it down for smaller sizes. It’s easiest to design a detailed image at a large size and reduce the level of detail, if necessary, at smaller sizes.

Use an 8px-by-8px grid. A grid keeps lines sharp and ensures that content is as crisp as possible at all sizes, requiring less retouching and sharpening. Snap the image boundaries to the grid to minimize half pixels and blurry details that can occur when scaling down. For templates and other resources, see Apple Design Resources.

Always preview high-resolution images at lower resolutions. If you’re not satisfied with how your high-resolution images look when scaled down, redraw and preview the art again.

Источник

Icon file names iOS 7

How do I have to name the Icon files for Xcode 5? It gives always errors that de app is not on the top level, it is really frustrating. Can someone give me the filenames that you have to use for every resolution?

9 Answers 9

icon file name and size for ios 7 compatible app as below (iPhone)

Icon-76.png — 76 x 76

Icon-76@2x.png 152 x 152

(EDIT: corrected names of 120 & 40 sizes, and added 76 + 152)

Asset Catalog is the best thing for setting application icons. It removes the need to follow naming conventions when you are adding or updating your app icons.

You can use this for setting splash screens & application icons..

In Xcode 5 you can find this options..

1- In the project navigator, select your target.

2- Select the General pane, and scroll to the App Icons section.

It really doesn’t matter how you name them. If you’re using the new catalog feature, you can just drag the icons into each slot.

I’ve named them in different ways and it hasn’t mattered. Ex. app_icon_72.png, app_icon_144.png or app_icon72@2x.png.

Please refer this url, you will get good idea about application icons naming convention http://developer.apple.com/library/ios/#qa/qa1686/_index.html

I have collected all required sizes for iOS 9+

Application Icon for iTunes, iPhone and iPad for three types : App, Spotlight and Settings including Retina and non retina screens needs Icons in following different sizes (in pixels).

Even Xcode guide us for this

iOS 5 no longer requires specific file names for various icon files. HOWEVER — If you include spaces in the icon file names (or probably any other illegal non-alphanumeric character) the icon files won’t work.

If you are not using Image catalog in Xcode-5 & still you are getting the error «app is not on the top level», then you are just messed with the location of your icon files. You should keep your icons files in your project folder in the same location where your PROJECT.xcodeProj file resides.

As @JackD said specific name doesn’t matter’s any more for ios icon. All you need is perfect size.

I have created this application which will provide you all the icons based on information provided here. Get the application from here, and follow the instructions in readme file to create all the required icons for iOS application.

But noticed that under the section: «Icons for Universal Apps», the filename for both 58×58 and 87×87 are the same Icon-Small@2x.png. Anyone knows what should be the proper names for these 2 resolutions?

1) 58×58 Icon-Small@2x.png Settings on devices with retina display Recommended if you have a Settings bundle, optional otherwise

2) 87×87 Icon-Small@2x.png Settings on iPhone 6 Plus Recommended if you have a Settings bundle, optional otherwise

Not the answer you’re looking for? Browse other questions tagged iphone ios7 or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.12.8.40937

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник