F# applications with icons

Icons of an F# WPF application

There are at least two different usages for icons. First, there is the application icon displayd on the top left corner of the application window and also in the task bar. Second, Windows Explorer shows application icons in the file lists and also uses them for shortcuts.

Application icon

  1. Create the icon. For example, save an image with Paint as a 256 color bitmap and change the file extension to *.ico
  2. Save the icon in an “Resources” subfolder of the project
  3. Set the Build Action of the icon to Resource
  4. Include the icon with the XAML file
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Icon="/Resources/MyIcon.ico"
        Title="MyApplication" Height="600" Width="1000" >

Windows Explorer icon

  1. Save the icon in 3.00 format using the free tool @icon sushi.
  2. Create a text file with a *.rc extension. Save the *.rc file in the “Resources” subfolder.
  3. The *.rc file should contain a single line. The ‘1’ is part of the text and not a line number.
1 ICON "MyIcon.ico"
  1. Ensure that the Resource Compiler rc.exe is installed. Adding the C++ Tools to Visual Studio should also install rc.exe.
  2. Compile the *.rc file with rc.exe into an *.res file.
C:\Program Files (x86)\Windows Kits\10\bin\x86>rc.exe /v C:\pathToMyFile\Resources\MyResources.rc
C:\Program Files (x86)\Windows Kits\10\bin\10.0.19041.0\x86>rc.exe /v "C:\pathToMyFile\Resources\MyResources.rc"
  1. In Visual Studio, select the Application tab of project property page
  2. Select the compiled *.res file in the Resources section. The complete absolute path to the file is shown. Leave the tick box “Use standard resource names” unchecked.
  3. With a text editor edit the project *.fsproj file. Change the absolut path to a relative path.
    Visual Studio should be closed.
<Win32Resource>Resources\MyResources.res</Win32Resource>

Windows Explorer Icon with .NET 5

Adding a Windows Explorer Icon became lot simpler with .NET 5:

  1. Get an icon: Create an icon from a image as outline above or download it from https://icon-icons.com or https://iconarchive.com
  2. Copy the icon to a Resources folder in the project folder
    Resources/MyIcon.ico
  3. Edit the project file *.fsproj. Add the <ApplicationIcon> tag:
<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net5.0-windows</TargetFramework>
    ...
	<ApplicationIcon>Resources/FillCertificate.ico</ApplicationIcon>
  </PropertyGroup>

References

Leave a Reply

Your email address will not be published. Required fields are marked *