Mac App Icon Icns



Mac icns Icons - Download 225 Free Mac icns icons @ IconArchive. Search more than 600,000 icons for Web & Desktop here. Inside the Resources folder will be the ICNS file which gives the app its generic icon. The file will be named “applet.icns” for AppleScript apps, and “AutomatorApplet.icns” for Automator apps. Simply rename your new icon’s ICNS file so that it has the appropriate name, and replace the existing one.

The following chart outlines the icon sizes and additional information about each kind of icon for Apple iOS, Android and Universal Windows Platform (UWP) that Icon Slayer outputs.

- iOS

- Android

- macOS (Mac OS X) ICNS

- Windows ICO

- Favicon ICO

- Web App / Progressive Web App

- Universal Windows Platform (UWP)

Mac App Icon Icns

iOS

Covers iOS apps up to iOS v10 for iPhone 4-5-6-7, iPad, iPad Pro, iPad Mini.

The following information was derived from generating a iOS project in Xcode version 8.1 (8B62).

Replace the 'AppIcon.appiconset' folder within the 'Assets.xcassets' folder within your Xcode project:

[project anme]/Assets.xcassets/AppIcon.appiconset

Points File Name Pixels
20ptiPhone Notification
iOS 7-10
iphone-notification-20pt@2x40
iphone-notification-20pt@3x60
29ptiPhone
Spotlight iOS 5,6
Settings iOS 5-10
iphone-spotlight-settings-29pt@2x58
iphone-spotlight-settings-29pt@3x87
40ptiPhone Spotlight
iOS 7-10
iphone-spotlight-40pt@2x80
iphone-spotlight-40pt@3x120
60ptiPhone App
iOS 7-10
iphone-app-60pt@2x120
iphone-app-60pt@3x180
20ptiPad Notifications
iOS 7-10
ipad-notifications-20pt@1x20
ipad-notifications-20pt@2x40
29ptiPad Settings
iOS 5-10
ipad-settings-29pt@1x29
ipad-settings-29pt@2x58
40ptiPad Spotlight
iOS 7-10
ipad-spotlight-40pt@1x40
ipad-spotlight-40pt@2x80
76ptiPad App
iOS 7-10
ipad-app-76pt@1x76
ipad-app-76pt@2x152
83.5ptiPad Pro App
iOS 9-10
ipad-pro-app-83.5pt@2x167

Web App / Progressive Web App

An Icon is shown on the device home screen when saving a bookmark. This is similar in nature to the 'favicon' for websites. The '-precomposed' portion of the filename prevents Apple from automatically adding gloss, rounded corners and drop shadows.

Refer to the 'Webpage Icon' Apple documentation page for additional details.

Apple invented the iOS Web Clip idea, but it has been picked up by Chrome (and others).

We've also included a manifest.json file for you as a starting point for your Progressive Web App.

Mac App Icon Icns

See the 'index.html' source code for how to include the icons in your page(s).

Android Apps

The following information was derived from: http://developer.android.com/guide/practices/ui_guidelines/icon_design.html

Asset Type Prefix Sizes
Google Market hi-resmarket_512 xhdpi
Button Status / Notify btn_stat_notify24 ldpi
32 mdpi
48 hdpi
64 xhdpi
Launcher iconsic_launcher36 ldpi
48 mdpi
72 hdpi
96 xhdpi
Menu icons and Action Bar icons ic_menu36 ldpi
36 ldpi_v9
18 ldpi_v11
48 mdpi
48 mdpi_v9
24 mdpi_v11
96 hdpi
72 hdpi_v9
36 hdpi_v11
96 xhdpi
96 xhdpi_v9
48 xhdpi_v11
Status bar icons ic_stat_notify 19 ldpi
12 ldpi_v9
18 ldpi_v11
25 mdpi
16 mdpi_v9
24 mdpi_v11
48 hdpi
24 hdpi_v9
36 hdpi_v11
50 xhdpi
32 xhdpi_v9
48 xhdpi_v11
Tab icons ic_tab24 ldpi
24 ldpi_v5
32 mdpi
32 mdpi_v5
48 hdpi
48 hdpi_v5
Dialog icons ic_dialog24 ldpi
32 mdpi
48 hdpi
Listsic_list24 ldpi
32 mdpi
48 hdpi

Universal Windows Platform (UWP)

The following information was derived from:
https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/tiles-and-notifications-app-assets

Splash Screen sizes derived from:
https://msdn.microsoft.com/library/windows/apps/br211467

Based on the description provided here, the system selects appropriate images based on the following scheme:

Where <name> can be anything you want. According to the guide, they're recommending using a naming convention of 'AppNameSmallTile.scale-XXX.png'. I found this to be rather confusing, so I decided to just stick with naming the images according to the attribute definition, which I believe is less confusing.

When referencing an image in your code, just use NAME.EXT. The '.scale-XXX' portion of the file name is not included in the code. The system automatically selects the appropriate image/scale as needed. Icon Slayer uses a naming convention that matches the element attribute, I believe this is least confusing.

Example:

Size File Name Notes
71 Square71x71Logo.scale-100.png Smal Tile
89 Square71x71Logo.scale-125.png
107 Square71x71Logo.scale-150.png
142 Square71x71Logo.scale-200.png
284 Square71x71Logo.scale-400.png
150 Square150x150Logo.scale-100.png Medium Tile
188 Square150x150Logo.scale-125.png
225 Square150x150Logo.scale-150.png
300 Square150x150Logo.scale-200.png
600 Square150x150Logo.scale-400.png
310Square310x310Logo.scale-100.pngLarge Tile
388Square310x310Logo.scale-125.png
465 Square310x310Logo.scale-150.png
620Square310x310Logo.scale-200.png
240Square310x310Logo.scale-400.png
310 x 150Square310x150Logo.scale-100.pngWide Tile
388 x 188Square310x150Logo.scale-125.png
465 x 225Square310x150Logo.scale-150.png
620 x 300Square310x150Logo.scale-200.png
1240 x 600Square310x150Logo.scale-400.png
44Square44x44Logo.scale-100.pngApp List (icon)
55Square44x44Logo.scale-125.png
66Square44x44Logo.scale-150.png
88Square44x44Logo.scale-200.png
176Square44x44Logo.scale-400.png
16Square44x44Logo.targetsize-16.pngTarget Size Icon
20Square44x44Logo.targetsize-20.png
24Square44x44Logo.targetsize-24.png
30Square44x44Logo.targetsize-30.png
32Square44x44Logo.targetsize-32.png
36Square44x44Logo.targetsize-36.png
40Square44x44Logo.targetsize-40.png
48Square44x44Logo.targetsize-48.png
60Square44x44Logo.targetsize-60.png
64Square44x44Logo.targetsize-64.png
72Square44x44Logo.targetsize-72.png
80Square44x44Logo.targetsize-80.png
96Square44x44Logo.targetsize-96.png
256Square44x44Logo.targetsize-256.png
620 x 300SplashScreen.screen-100.pngSplash Screen
868 x 420SplashScreen.screen-140.png
1116 x 540SplashScreen.screen-180.png

App Icon

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.

macOS 11

Mac icon file

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.

AttributeValue
FormatPNG
Color spacesRGB (color) or Gray Gamma 2.2 (grayscale)
LayersFlattened with transparency as appropriate
Resolution@1x and @2x (see Image Size and Resolution)
ShapeSquare with no 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:

  • 512x512 pt (512x512 px @1x, 1024x1024 px @2x)
  • 256x256 pt (256x256 px @1x, 512x512 px @2x)
  • 128x128 pt (128x128 px @1x, 256x256 px @2x)
  • 32x32 pt (32x32 px @1x, 64x64 px @2x)
  • 16x16 pt (16x16 px @1x, 32x32 px @2x)

Mac Icon Format

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.

Macos Icon File

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