Creating custom icons for applications

Several customers have asked for help in creating their own custom application icons. This is a rather simple process that only requires a simple paint program and some understanding of the CustomUpdate process and appicon structure.

UAG requires 4 icons for each application:

1. A regular (large) icon

2. A nav-bar (small) icon

3. A “disabled” regular icon

4. A “disabled” small icon

UAG comes pre-configured with many icons, covering all the built-in templates, but you can create your own sets. This can be done with something like Paint.NET, or a more advanced application, if you have reasonable control over one. The icons you need to create should be 88x50 pixels for the large icons, and 15x15 pixels for the small icons. The UAG default icons for “disabled” apps (apps for which the user has no access) are “grayed out”, but you are free to create any shape or form you want. For example, you might prefer an icon with a large X on it, or some custom text – anything goes, really.

To configure an application to use a custom icon, you need to adjust the “Icon URL” setting in the application’s Portal Link tab:

On the Icon URL setting, you specify the name of the primary (Active application with a large icon) file, including the relative path that starts with the image folder, and the CustomUpdate folder name (see example in the screenshot above). UAG will look for the other 3 icons based on the following naming convention:

1. A regular (large) icon - <name>.gif

2. A nav-bar (small) icon - <name>_icon.gif

3. A “disabled” regular icon - <name>_dis.gif

4. A “disabled” small icon - <name>_icon_dis.gif

The actual image-size is not critical, because UAG will display the icon even if it’s not the right size. It will, however, show it at the standard size and shape, so if you create different files, they may be appear distorted

As with all UAG customizations, the custom files should be located in the CustomUpdate folder. The full location is:

C:\program files\Microsoft Forefront Unified Access Gateway\Von\PortalHomePage\Images\AppIcons\CustomUpdate

Once you put your files in the CustomUpdate folder, adjust the Icon URL setting and activate the configuration, the application should show the image right away.

If this is not working properly, you need to check the URL of the icon that UAG is trying to load. This is not that simple, as the right-click functionality on the portal is disabled normally, so you can’t just right-click on the dead icon and see its properties. Instead, you can use a tool such as HTTPWatch or Fiddler to view the page source and see:

The ContentFrame.aspx page is where the large icons are at, and the MainFrame.aspx page is where the small icons are at. You may discover that you have made a typo in the file name or path. Another possibility is that the image itself is not fully compatible to the file-format standard, and IE just can’t show it. This is also visible in the HTTPWatch trace – the “result” column will show a 200 for an image that was downloaded successfully (meaning IE got it…but can’t show it) and a 404 for an image that was not found on the server for some reason.

The last tip for creating icons is that you can use PNG or GIF files for this task, and these also support transparency. The small icons are displayed against a gray background, while the large ones are on a white page. You might want to consider creating a transparent background for your icon images, to make the appearance look best. Not all paint programs actually support this, but it’s worth looking into!

Blog post written by Ben Ari