Setting the App Icon and SplashScreen in MAUI [GamesCatalog] 17

Previous part: Search and Removal of Item from Local List in MAUI [GamesCatalog] 16

Step 1. To use as the project icon, we can use any .svg image. We'll use an image from our own icon source as an example.

https://fontawesome.com/icons/gamepad?f=classic&s=solid

Step 2. Replace or create another file in the AppIcon folder with the .svg code.

In this case, we replaced appicon.svg.

Step 3. Repeat the same process with splash.svg.

Or create a folder with a single .svg file that will define your icon and splash in the next step.

Step 4. In GamesCatalog.csproj, set the icon and splash screen image.

We won’t use a ForegroundFile for the icon — instead, we’ll define the background and image color.

Code

<!-- App Icon -->
<MauiIcon Include="Resources\AppIcon\appicon.svg" Color="#1B2D3E" TintColor="White">
  <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</MauiIcon>

<!-- Splash Screen -->
<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#1B2D3E" TintColor="White">
  <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</MauiSplashScreen>

Step 5. With that, we have our app icon and SplashScreen set.

SplashScreen

Icon

Toast

Now we have an app that saves the situations and ratings of games retrieved from the IGDB API.

With this, we can consider the first phase of our project completed.

So far, the app stores the ratings locally only, has no user registration option, and keeps the IGDB API key embedded directly in the code.

To address these and other issues, in the next stage, we will begin the second phase of the project: Creating a Web API that will serve as our backend.