Icon scaling in Desktop

Eduardo Gomez Romero 705

Screenshot 2024-09-22 183506

So, I have my custom icon for my app in my phone

METROWIND

But when I see it on desktop is tiny

User's image

and I want to see it like this
User's image

this is my csprog file

<ItemGroup>
	<!-- App Icon -->
	<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" />

	<!-- Images -->	
	<MauiImage Include="Resources\Images\*" />
	<MauiImage Update="Resources\Images\charge_station.png">
		
	  <CopyToOutputDirectory></CopyToOutputDirectory>
	</MauiImage>
	<MauiImage Update="Resources\Images\dotnet_bot.png" Resize="True" BaseSize="300,185">
	  <CopyToOutputDirectory></CopyToOutputDirectory>
	</MauiImage>
	<MauiImage Update="Resources\Images\no_image.png">
	  <CopyToOutputDirectory></CopyToOutputDirectory>
	</MauiImage>
	<MauiImage Update="Resources\Images\wind_turbine.png">
	  <CopyToOutputDirectory></CopyToOutputDirectory>
	</MauiImage> 
	
	<!-- Custom Fonts -->
	<MauiFont Include="Resources\Fonts\*" />

	<!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
	<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-09-23T02:12:40.1866667+00:00

App icon on Windows machine, right? Or on Mac?
Eduardo Gomez Romero 705 Reputation points

2024-09-23T07:38:08.8733333+00:00

Windows, I cannot test on mac
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-09-23T08:16:57.3+00:00
For further investigation, could you provide the following information?

What's the MAUI version? And what's the Windows version?

I understand that you replace the default appicon.svg image with your icon image file, right? When creating and running an empty MAUI project(with the default template appicon), is the icon normal?

Eduardo Gomez Romero 705

Maui 8.0, I don't know the windows version

Here is the csproj

<PropertyGroup>
	<TargetFrameworks>net8.0-android;net8.0-ios;net8.0-maccatalyst</TargetFrameworks>
	<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net8.0-windows10.0.19041.0</TargetFrameworks>
	
	<!-- Note for MacCatalyst:
	The default runtime is maccatalyst-x64, except in Release config, in which case the default is maccatalyst-x64;maccatalyst-arm64.
	When specifying both architectures, use the plural <RuntimeIdentifiers> instead of the singular <RuntimeIdentifier>.
	The Mac App Store will NOT accept apps with ONLY maccatalyst-arm64 indicated;
	either BOTH runtimes must be indicated or ONLY macatalyst-x64. -->
	<!-- For example: <RuntimeIdentifiers>maccatalyst-x64;maccatalyst-arm64</RuntimeIdentifiers> -->
	<OutputType>Exe</OutputType>
	<RootNamespace>METROWIND</RootNamespace>
	<UseMaui>true</UseMaui>
	<SingleProject>true</SingleProject>
	<ImplicitUsings>enable</ImplicitUsings>
	<Nullable>enable</Nullable>
	<!-- Display name -->
	<ApplicationTitle>METROWIND</ApplicationTitle>
	<!-- App Identifier -->
	<ApplicationId>com.companyname.metrowind</ApplicationId>
	<!-- Versions -->
	<ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
	<ApplicationVersion>1</ApplicationVersion>
	<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">11.0</SupportedOSPlatformVersion>
	<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">13.1</SupportedOSPlatformVersion>
	<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
	<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
	<TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
	<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
</PropertyGroup>

Yes the app is normal in an empty app

User's image

Yes I put a deleted the purple layer in the ap icon and put a transparent Layer, and for the forground I put my icon

On desktop I wanted to be big like the Whatsapp Icon

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-09-23T09:19:53.5733333+00:00

Could you edit your svg file with other width or height and then check if the issue is related to the svg file?
Eduardo Gomez Romero 705 Reputation points

2024-09-23T12:11:33.7433333+00:00

I already tied to put it bigger and in android il looks bad
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-09-24T07:25:53.47+00:00

I put a deleted the purple layer in the ap icon and put a transparent Layer, and for the forground I put my icon

If the layer and background are not necessary, you could try to delete the foreground svg file, and just keep icon to the appicon.svg. See Add an app icon to a .NET MAUI app project - .NET MAUI | Microsoft Learn

Also, it's not clear about what your icon is. Could you design another icon to see the appearance?

Share via

Icon scaling in Desktop

Your answer