Branding Your Wix Installer

Friday, 11 July 2014

As a continuation from this post where I showed how to create a basic WIX installer, I'm now going to show you how to brand your installer by adding custom images to the UI and an add/remove programs icon.

Replacing the default welcome image

By default, you will see this image when you run your new installer.

default wix welcome image

To change this image you need to add a reference to the image you want to use in the product.wxs file. Add a WixVariable element to the product.wxs file then set the id attribute to WixUIDialogBmp and the value attribute to the filepath of the image you want to use. The image must be called dialog.bmp and have dimensions 503 × 314. The image should also be placed in a subfolder of the setup project directory.

        
    

Once the image has been added, rebuild the project then running the installe located in the bin\debug folder.

custom wix welcome image

Replacing the default banner image

The next image you can replace is the banner image. The banner image appears at the top of the wizard when going through the installation.

default wix banner image

To change this, add another WixVariable element to the product.wxs file with an id of WixUIBannerBmp. Set the value to the filepath of the image and call it banner.bmp. The dimensions of the banner image should be 500 × 63.

        
    

Rebuild the project then launch the installer again. Be sure to close any running instances of the installer before rebuilding.

custom wix banner image

Replacing the default add/remove programs icon

When you install your application, the default icon is displayed in the add remove programs menu.

default wix add/remove program icon

To change this icon, you need to include your replacement icon by adding an Icon element to the product.wxs file.

        
    

Give the icon an id and set the value of the sourceFile attribute to the filepath of the icon.
Next you must set the value of the ARPPRODUCTICON property to the id of the icon. This will tell WIX to use the icon when building the installer.

To do this add a property element to the product.wxs file.

        
    

The id of the element should be set to ARPPRODUCTICON and the value set to the id of the icon added earlier.

Now if we rebuild the project then install the application, we will see the new icon in the add/remove programs menu.

Custom wix add/remove program icon

The full source code for this example can be found here