How to Create Application Icons in Domino 12.0.1

In the Notes and Domino release of version 12.0.1 (coming soon!), we have updated the ability to display 64 x 64 px application icons in the workspace. You will have the ability to upload icon files that are larger than that, but on workspace they will display as 64 x 64 px. If you have older application icons that were created with the 32 x 32px icon specification that existed prior to this release, then those will still display at the smaller size. The Notes Domino design and development teams are working to update existing template icons for HCL provided templates; you will also see these icons updated in the v12.0.1 release.

If you have seen some of the new template icons, you might be thinking, “How can I update my application icons to look like that?” Follow along with the tutorial below or watch the webinar replay on how to update your Notes application icons. The default application icons are available to download from the forum here.

For applications using HCL-provided template such as mail, calendar, rooms and resources, and directory, etc., these will automatically update when the user opens these applications. For the custom applications that you have created for your clients or company, these icon files will need to be updated and deployed in Domino Designer by the owner of the application.

Examples of HCL provided template icons:

Guide to Creating Application Icons 

The following documentation explains how to design new application icons that match the style of the HCL Notes app icons but are tailored to the purpose of your application.

There are two different approaches you can take, review the following documentation, and decide which approach is best for you.

Option 1 

Use one of the provided icons and upload to Domino Designer. In this package, there are some default app icons that you can use out of the box and there is no design needed. These icons map to some of the templates that are provided with Domino such as Teamroom, Discussion, and Document Library. For these, all you will need to do is download the icon you would like from the folder titled “Option 1 – default Icons,” and upload it to designer.

Available Default Icons:

Option 2 

Note: For this option you will need to have access to an image-editing tool, such as:     

• Microsoft Paint: Installed on Windows Machine 
• GIMP: A free software available for Windows and Mac 
• Adobe Photoshop: I would suggest to only use this one if you already have it installed on your machine  

You can create an application icon using a foreground and background image provided in this package.

Within this package there are many foreground and background images to select from. Select the ones that best match the intention of the application. For example, if the application is focused on scheduling and uses calendar views, then you might want to choose one of the foreground icons that represents events or time. While for the background color you might want to choose a color that is also represented in the color of the application.

Example Application Icons:

GIMP: Step by step 

The following instructions describe how to create these icons in GIMP 2.10. Other image editing software would have similar steps.

Step 1 

In the zip file provided you will see a folder titled Option 2 – Foreground and Background > Background Images. Within this folder select the background image that you would like to use. Then select a foreground image from the folder Option 2 – Foreground and Background > Foreground Images.

Step 2 

Create a new document and set the image size to 64 x 64px.

Step 3 

Drag or import the background image from the downloaded zip file. The background image was created specifically for a 64 x 64px background. Be sure that the background image is centered on the artboard.

Step 4

Follow the same steps for placing the foreground image. Be sure that the order of the layers has the foreground image on top of the background image.

Step 5 

If the background of the artboard is not transparent, then delete the white background that was created by default.

Step 6 

Export the image as a PNG file and upload the image to the Application Icon section in Domino Designer.