Coolco
Coolco

Reputation: 53

Change the app icon for android and iOs in MAUI

I am trying to change the app icon in a MAUI project but I am unable to do it.

I have added two images to the AppIcon folder ( I tried png and svg but none of them work)

And changed the csproj file to the new icons

<MauiIcon Include="Resources\AppIcon\coolcoicon.svg" ForegroundFile="Resources\AppIcon\coolcoiconbg.svg" Color="#000000" />

I have cleaned the solution and the project.

However, when I try to play the app in the android emulator I have these error

Error   APT2260 resource mipmap/appicon (aka com.coolco.coolcoapp:mipmap/appicon) not found.
Error   APT2260 resource mipmap/appicon_round (aka com.coolco.coolcoapp:mipmap/appicon_round) not found.
Error   APT2067 failed processing manifest.

Error

Upvotes: 5

Views: 17101

Answers (3)

ILLIA VOLHA
ILLIA VOLHA

Reputation: 11

This is what helped me, after many unseccessful attempts:

  1. Make sure that you have two png files with different names in my case:

    • appicont.png
    • appicontr.png
  2. In VS Click on Project with Right Button (Project, Not Solution) Click "Unload Project".

  3. Then, when it will be unloaded, once again click on it with Right Button and select "Edit Project File".

  4. In opened file in Project Node (at the end before Project closing tag) add:

     <ItemGroup>
     <MauiIcon Include="Resources\AppIcon\appicont.png"  BaseSize="512, 512"/>
     <MauiIcon Include="Resources\AppIcon\appicontr.png"  BaseSize="512, 512"/>
    

    Here goes closing ItemGroup that somehow deleted by Stack

  5. Make sure that you placed both of your PNGs in this directory and both files are not larger than 512x512px.

  6. After that, right click on a project and "Rebuild Project with Dependencies"

  7. Next, in solution explorer find Platforms->Android->AndroidManifest.xml

    • click on it with right button
    • select open with
    • select HTML editor (By default it opens in useless Manifest Editor )
  8. Inside add:

android:icon="@mipmap/appicont" android:roundIcon="@mipmap/appicontr"

Build solution and see if it works for you.

I believe in my case the problem was that I tried to use the same file as both: normal icon and round icon.

Round Icons are important.

Good Luck..

Upvotes: 1

Samuel B.
Samuel B.

Reputation: 456

For iOS what worked for me:

Application Icon

  1. !!! Application Icon will not be deployed using hot restart iOS deployment from Visual Studio !!!

  2. First try to use default Resources\AppIcon\appicon.svg and Resources\AppIcon\appiconfg.svg files without changing their size and replace content in those file with your own.

  3. From MS docs: "While the project file -> .csproj declares which resources the app icon is composed from, you're still required to update the individual platform configurations with reference to those app icons"

3.1 In file Platforms\iOS\Info.plist create new entry:

<key>XSAppIconAssets</key>
<string>Assets.xcassets/appicon.appiconset</string>

Where appicon in appicon.appiconset have to match name of default Resources\AppIcon\appicon.svg resource file mentioned in -> .csproj

  1. Custom app icons needs to have Build Action set to MauiIcon. In Solution Explorer ( right click on file in Solution Explorer -> Properties -> Build Action = MauiIcon

  2. In order to see changes delete Application in Device / iOS Simulator

  3. Clean build

  4. Try it now

7.1 Do not worked ? Try deleting obj and bin folder of project, be aware this might lead to restoring Nuget Packages ( right click on Solution name in Solution explorer -> Restore Nuget Packages)

7.2 Delete app from Device / iOS Simulator and try again

Splash screen

  1. in -> .csproj file, works for me:

     <!-- Splash Screen -->
     <MauiSplashScreen Include="Resources\Splash\splashscreen.png" BaseSize="400, 200" Color="White" />
    

1.1 File splashscreen.png have Build Action set to MauiSplashScreen ( right click on file in Solution Explorer -> Properties -> Build Action = MauiSplashScreen

1.2 From MS docs: The base size is specified with the BaseSize="W,H" attribute, where W is the width of the icon and H is the height of the icon. The value specified as the base size must be divisible by 8. The following example sets the base size:

1.3 Clean build and deploy

My project setup Target platform .NET 7, Visual Studio Community 2022 Version 17.7.6

Documentation

Microsoft docs: Check Platform-specific configuration here in Add an app icon to a .NET MAUI app project

Hints:

Custom App Icon and Custom Maui splash screen as PNG files

  1. When you have custom .PNG file with custom size, its sizes (width, height) should be divisible by 8

  2. Auto scaling of .PNG file might occurs if your pictures are big (sizes for Icon App differs based on platform, devices and place where they are shown in phone like desktop, settings). In order to do scale possible you need to set in -> .csproj file for MauiIcon or MauiSplashScreen BaseSize property same as your.png file itself have.

E.g. file have 1200 width and 1200 height both sizes are divisible by 8. For app icon correct down scaling will happen because of BaseSize property

    <MauiIcon Include="Resources\AppIcon\appicon_custom.png" ForegroundFile="Resources\AppIcon\appiconfg_custom.png" BaseSize="1200, 1200" />

    <MauiSplashScreen Include="Resources\Splash\appsplash_custom.png" Color="#FF7700" BaseSize="1200, 1200" />

Downscaling of .PNG files results in smoother picture than upscaling. Because of that you might think twice about size of your "base pictures". In case of .SVG files size is taken from content of .SVG file so there is no need to set particular size as in the case of .PNG files.

Upvotes: 7

Liyun Zhang - MSFT
Liyun Zhang - MSFT

Reputation: 14469

Please check the AndroidManifest.xml in the /Platforms/Andorid. And there is such one line code in it:

 <application ... android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" ...>

When you change the Appicon in the project's csproj file. You also need to change this line for the android. Such as:

 <application ... android:icon="@mipmap/coolcoicon" ...>

The android:roundIcon only used for the android 7.1. And you can delete it directly. I have tested this, and the app icon changed successfully.

You can also set the icon's file name as the default like H.A.H said.

Upvotes: 8

Related Questions