Update docs from feedbacks

doc/using-uno-resizetizer.md

@@ -15,6 +15,9 @@ Starting Uno Platform 4.8, the solution template includes Uno.Resizetizer by def
 
 Uno.Resizeter is delivered [through NuGet](https://www.nuget.org/packages/Uno.Resizetizer). In order to install it you can either download it using your IDE (this will be shown in the next steps) or added directly on your `.csproj` as shown in the [NuGet page](https://www.nuget.org/packages/Uno.Resizetizer/).
 
+> [!NOTE]
+> If you're using the new template, you can skip this step because it is already included by default with Uno Platform 4.8 and later.
+
 ### 1. Installing Uno.Resizetizer
 
 * Open your favorite IDE, in this case, it will be Visual Studio, after that open the Manage NuGet packages window
@@ -33,6 +36,10 @@ Uno.Resizetizer can handle:
 
 The next sections will show how to use it for each use case.
 
+> [!WARNING]
+> All the assets used by Uno.Resizetizer should be lower case and don't have special characters. You can use `_` to separate words.
+> This is because the assets are used on different platforms and some of them have limitations on the characters that can be used.
+
 ### UnoImage
 
 `UnoImage` is the build action used for images that will be part of the app.
@@ -52,14 +59,18 @@ Make sure that the build assets are configured to be `UnoImage`. In the `csproj`
 </ItemGroup>
 ```
 
+You can also make specific files to be `UnoImage` using VisualStudio, by right-clicking on the file and selecting `Properties` and then `Build Action` and selecting `UnoImage`. The image below shows how it looks like:
+
+![UnoImage Build Action](Assets/UnoImage_BuildAction.png)
+
 ### 3. Using the assets on the project
 
 * `UnoImage` assets can now be used just like any regular image. For example:
 
 ```xml
 <Image Width="300"
        Height="300"
-       Source="Assets\Images\myImage.png" />
+       Source="Assets\\Images\\my_image.png" />
 ```
 
 > [!TIP]
@@ -69,6 +80,8 @@ Make sure that the build assets are configured to be `UnoImage`. In the `csproj`
 
 `UnoIcon` is the build action for the app icon. There should only be one per application. The `UnoIcon` accepts two assets, one that represents the `Foreground` and another that represents the `Background`. During the generation phase, those files will be merged into one `.png` image.
 
+During the creation of your `svg` file, please remember to make the `ViewBox` bigger than the `Foreground` and `Background` images, not adding an extra space could make the app icon doesn't look good on some platforms. We recommend to add a 30% extra space on each side. This will be enough for Resizetizer to work with padding and margins.
+
 ### 4. Configuring the project to use generated app icon
 
 # [**Class Library Based Solution**](#tab/classlib)
@@ -84,10 +97,14 @@ Make sure that the build assets are configured to be `UnoImage`. In the `csproj`
 </ItemGroup>
 ```
 
+We recommend to add the `UnoIcon` on `base.props` because this file is imported by all head projects, that way, you don't need to add the same configuration on each head project.
+
+If you want, you can see our sample project [here](https://github.com/unoplatform/uno.resizetizer/blob/main/samples/NewTemplate/Resizetizer.Extensions.Sample.Base/base.props#L16-L18) where this step is configured.
+
 # [**Shared Project Based Solution**](#tab/sharedproject)
 
 * Create an `Icons` folder inside the Shared project, and add the files related to the app icon there.
-* In each of your project heads (iOS, Android, WebAssembly, ...) add the following block:
+* In each of your project heads (iOS, Android, WebAssembly, ...) add the following block on their `csproj`:
 
 ```xml
 <ItemGroup>
@@ -97,11 +114,15 @@ Make sure that the build assets are configured to be `UnoImage`. In the `csproj`
 </ItemGroup>
 ```
 
+You can also make specific files to be `UnoIcon` using VisualStudio, by right-clicking on the file and selecting `Properties` and then `Build Action` and selecting `UnoIcon`. The image below shows how it looks like:
+
+![UnoIcon Build Action](Assets/UnoIcon_BuildAction.png)
+
 ***
 
 Next, some adjustments are needed on `Android`, `Windows`, `WebAssembly`, `mac-catalyst`, and `iOS`. Let's start with `Android`.
 
-* Open the `Main.Android.cs` file (or the file that has the `Android.App.ApplicationAttribute`), and change the `Icon` property, in that attribute, to be the name of the file used in the `Include` property of `UnoIcon`, in our case will be:
+* Open the [`Main.Android.cs` file](https://github.com/unoplatform/uno.resizetizer/blob/main/samples/NewTemplate/Resizetizer.Extensions.Sample.Mobile/Android/Main.Android.cs) (or the file that has the `Android.App.ApplicationAttribute`), and change the `Icon` property, in that attribute, to be the name of the file used in the `Include` property of `UnoIcon`, in our case will be:
 
 ```csharp
 [global::Android.App.ApplicationAttribute(
@@ -116,8 +137,8 @@ Icon = "@mipmap/iconapp",
 
 Now let's jump to the Windows platform.
 
-* Open the `Package.appxmanifest` file and look for the `Application` tag
-* And remove everything that's related to the application icon. It should look like this:
+* Open the [`Package.appxmanifest` file](https://github.com/unoplatform/uno.resizetizer/blob/main/samples/NewTemplate/Resizetizer.Extensions.Sample.Windows/Package.appxmanifest) and look for the `Application` tag
+* And remove everything that's related to the application icon (BackgroundColor, Square and Wide property inside the `uap:DefaultTile` attribute). It should look like this:
 
 ```xml
 <Applications>
@@ -139,7 +160,7 @@ Now let's jump to the WebAssembly platform.
 > [!NOTE]
 > You will only need to configure this platform if you want to deploy it as a PWA.
 
-* Open the `manifest.webmanifest` file and look for the `icons` tag and remove all the values inside it. You should be seeing an empty array like this:
+* Open the [`manifest.webmanifest` file](https://github.com/unoplatform/uno.resizetizer/blob/main/samples/NewTemplate/Resizetizer.Extensions.Sample.Wasm/manifest.json) and look for the `icons` tag and remove all the values inside it. You should be seeing an empty array like this:
 
 ```json
 {
@@ -150,9 +171,12 @@ Now let's jump to the WebAssembly platform.
 }
 ```
 
+> [!NOTE]
+> In some projects the `manifest.webmanifest` be `manifest.json`. If so, you can either adjust your project to use `manifest.webmanifest` or keep it as `manifest.json`.
+
 Now let's jump to Apple platforms.
 
-* For `mac-catalyst` and `iOS`, open the `info.plist` file, find the `XSAppIconAsset` key, and change its value to `Assets.xcassets/iconapp.appiconset`.
+* For `mac-catalyst` and `iOS`, open the [`info.plist` file](https://github.com/unoplatform/uno.resizetizer/blob/main/samples/NewTemplate/Resizetizer.Extensions.Sample.Mobile/iOS/Info.plist), find the `XSAppIconAsset` key, and change its value to `Assets.xcassets/iconapp.appiconset`.
 
 > [!NOTE]
 > If your app icon has another name than `iconapp` use it instead.
@@ -166,14 +190,14 @@ Now let's jump to Apple platforms.
 
 * `BaseSize`: It's the size that will be used to perform the scaling of the image. The default value is the size of the asset. So if you feel that your SplashScreen doesn't look right you can tweak this value.
 
-* `Color`: It's the background color that will be used to fill the empty space on the final SplashScreen asset. The default value is `#FFFFFF`(transparent).
+* `Color`: It's the background color that will be used to fill the empty space on the final SplashScreen asset. The default value is `#FFFFFF`(white).
 
 ### 5. Configuring the project to use generated splash screen
 
 # [**Class Library Based Solution**](#tab/classlib)
 
 * Create a `SplashScreen` folder inside the Base project, and add the file related to the splash screen there.
-* Now open the `base.props` file, inside the `MyApp.Base` folder project and add the following block
+* Now open the `base.props` file, inside the `MyApp.Base` folder project and add the following block:
 
 ```xml
 <UnoSplashScreen
@@ -182,21 +206,29 @@ Now let's jump to Apple platforms.
          Color="#512BD4" />
 ```
 
+We recommend to add the `UnoSplashScreen` on `base.props` because this file is imported by all head projects, that way, you don't need to add the same configuration on each head project.
+
+If you want, you can see our sample project [here](https://github.com/unoplatform/uno.resizetizer/blob/main/samples/NewTemplate/Resizetizer.Extensions.Sample.Base/base.props#L19-L21).
+
 # [**Shared Project Based Solution**](#tab/sharedproject)
 
 * Create a `SplashScreen` folder inside the Shared project, and add the file related to the splash screen there.
-* In each of your project heads (iOS, Android, WebAssembly, ...) add the following block:
+* In each of your project heads (iOS, Android, WebAssembly, ...) add the following block on their `csproj`:
+
 ```xml
 <UnoSplashScreen
          Include="..\MyApp.Shared\SplashScreen\splash_screen.svg"
          BaseSize="128,128"
          Color="#512BD4" />
 ```
 
+You can also make specific files to be `UnoSplashScreen` using VisualStudio, by right-clicking on the file and selecting `Properties` and then `Build Action` and selecting `UnoSplashScreen`. The image below shows how it looks like:
+
+![UnoSplashScreen Build Action](Assets/UnoSplashScreen_BuildAction.png)
 
 Next, some adjustments are needed on `Android`, `Windows`, and `iOS`. Let's start with `Android`.
 
-* Open the `Style.xml` file, look for the `Theme` that is been used by the application and add the following line:
+* Open the [`style.xml` file](https://github.com/unoplatform/uno.resizetizer/blob/main/samples/NewTemplate/Resizetizer.Extensions.Sample.Mobile/Android/Resources/values/Styles.xml), look for the `Theme` that is been used by the application and add the following line:
 
 ```xml
 <style name="AppTheme" parent="Theme.AppCompat.Light">
@@ -207,7 +239,10 @@ Next, some adjustments are needed on `Android`, `Windows`, and `iOS`. Let's star
     <item name="android:windowSplashScreenBackground">@color/uno_splash_color</item>
     <item name="android:windowBackground">@drawable/uno_splash_image</item>
     <item name="android:windowSplashScreenAnimatedIcon">@drawable/uno_splash_image</item>
+
     <!-- Image at the footer -->
+    <!-- This is not required in order to make the Splash screen work -->
+    <!-- For more info please see: https://developer.android.com/develop/ui/views/launch/splash-screen#set-theme -->
     <item name="android:windowSplashScreenBrandingImage">@drawable/uno_splash_image</item>
 </style>
 ```
@@ -217,7 +252,7 @@ Next, some adjustments are needed on `Android`, `Windows`, and `iOS`. Let's star
 
 Now let's jump to Windows platform.
 
-* Open the `Package.appxmanifest` file and look for the `Application` node, inside it, look for the `uap:SplashScreen` node. Delete the `Image` property and its value, the `Application` tag should be like this:
+* Open the [`Package.appxmanifest` file](https://github.com/unoplatform/uno.resizetizer/blob/main/samples/NewTemplate/Resizetizer.Extensions.Sample.Windows/Package.appxmanifest) and look for the `Application` node, inside it, look for the `uap:SplashScreen` node. Delete the `Image` property and its value, the `Application` tag should be like this:
 
 ```xml
 <Applications>
@@ -236,7 +271,7 @@ Now let's jump to Windows platform.
 
 Now let's jump to iOS platform.
 
-* Open the `info.plist` file and look for the `UILaunchStoryboardName` key, delete it and its value.
+* Open the [`info.plist` file](https://github.com/unoplatform/uno.resizetizer/blob/main/samples/NewTemplate/Resizetizer.Extensions.Sample.Mobile/iOS/Info.plist) and look for the `UILaunchStoryboardName` key, delete it and its value.
 
 > [!TIP]
 > Feel free to delete the `LaunchScreen.storyboard` file.
@@ -247,4 +282,3 @@ Now let's jump to iOS platform.
 ## Sample App Example
 
 A sample app is available [here](https://github.com/unoplatform/uno.resizetizer/tree/main/samples/NewTemplate) as an example for all the previous steps detailed above.
-