Download Report

Application Icon
Creating an Icon for a Xamarin.Mac application
Contents
This article will cover the following topics in detail:
Application Icon
Designing the Icon
Required Image Sizes and Filenames
Packaging the Icon Resources
System-Provided Tools
3rd Party Tools
Using the Icon
Overview
When working with C# and .NET in a Xamarin.Mac application, you have access to the same Image and Icon
tools that a developer working in in Objective-C and Xcode does.
A great Icon should convey the main purpose of your Xamarin.Mac application and hint experience the user
should expect when using your app. This article covers all of the steps necessary to create the Image Assets
required for your Icon, packaging those assets into a .icns file and consuming that file in your Xamarin.Mac
application.
Application Icon
A great Icon should convey the main purpose of your Xamarin.Mac application and hint experience the user
should expect when using your app. Every OS X application must include several sizes of its Icon for display in
the Finder, Dock, Launchpad, and other locations throughout the computer.
Designing the Icon
Apple suggests the following tips when designing your application's icon:
Consider giving your icon a realistic and unique shape.
If your OS X application has an iOS counterpart, don’t reuse your iOS app's icon.
Use universal imagery that people can easily recognize.
Strive for simplicity.
Use color and shadow sparingly to help the icon tell the application's story.
Avoid mixing actual text with greeked text or lines to suggest text.
Create an idealized version of the icon's subject rather than using an actual photo.
Avoid using OS X UI elements in your icons.
Don’t use replicas of Apple icons in your icons.
We highly suggest that you read the App Icon Gallery and Designing App Icons sections of Apple's OS X Human
Interface Guidelines before designing your Xamarin.Mac application's icon.
Required Image Sizes and Filenames
Like any other Image Resource that you are going to use in a Xamarin.Mac application, your app Icon needs to
provided both a Standard and Retina Resolution version. Again, like any other image, you'll use a @2x format
when naming your Icon files:
Standard-Resolution - ImageName.filename-extension (Example: icon_512x512.png)
High-Resolution - [email protected] (Example: [email protected])
For example, to supply the 512 x 512 version of the application's icon, the file would be named
icon_512x512.png and [email protected].
To ensure that your icon looks great in all the places that users see it, you need to provide resources in the sizes
listed below:
Filename
Size in Pixels
[email protected]
1024 x 1024
icon_512x512.png
512 x 512
[email protected]
512 x 512
icon_256x256.png
256 x 256
[email protected]
256 x 256
icon_128x128.png
128 x 128
[email protected]
64 x 64
icon_32x32.png
32 x 32
[email protected]
32 x 32
icon_16x16.png
16 x 16
Packaging the Icon Resources
There are two different ways that you can package your application's icons for including in your Xamarin.Mac
Project:
System-Provided Tools
After you have created the necessary application icon assets (as stated in the section above), place them in a
folder called icon.iconset. Next you'll use the system-provided tools to convert your .iconset folder into a
single .icns file. In the Terminal application, enter the command iconutil -c icns [iconset
filename], where [iconset filename] is the path to the .iconset folder (created above).
For more information, see Apple's Provide High-Resolution Versions of All App Graphics Resources
documentation.
3rd Party Tools
There are several 3rd Party tools available in the Mac App Store that provide a graphical interface for creating
your .icns file, many of which are of minimal cost or free. One such free tool is Icns Builder which allows you to
provide just the 1024 x 1024 version of the application's icon and it will build the other required icons from it and
make the final .icns file.
Do the following:
1. Start Icns Builder and select Mac OS as the icon type:
2. Drag in your 1024 x 1024 Application Icon Image
3. Click the Save button and save your icon.icns file in the Resources folder of your Xamarin.Mac Project
With your icon.icns file built you can now include it in your Xamarin.Mac application.
Using the Icon
Once you have the icon.icns file built, you'll need to assign it to your Xamarin.Mac Project in Xamarin Studio.
Do the following:
1. Double-click the Project in the Solution Explorer to open the Project Options.
2. Select the Mac Application tab and click the App Icon to select your icon.icns file:
3. Select your icon.icns file and the Open button:
4. The Icon will be added to your project:
5. Click the OK button to save your changes.
If you run the application, the new icon will be displayed in the dock:
Summary
This article has taken a detailed look at working with Images required to create an OS X application Icon,
packaging an Icon and including an Icon in a Xamarin.Mac Project.