To start making your app icon maskable, use the purpose property in the icon objects of your web app manifest, and set its value to maskable. The following image illustrates the difference between a maskable and a non-maskable icon on Android: On Android, non-maskable icons are centered within the circular mask and given a white background, which may not look good with your icon. Icons that do not support masking may appear cropped or smaller than expected. Your PWA app icon should specifically support masking to look well integrated with operating systems that apply masks. Otherwise, the icon will appear within a white or theme-colored circle. If the icon is adaptive, or maskable, the icon will fill up the circle and can be colored according to the user's theme. For example, on Android, app icons can have a circular mask or theme color applied to them, or both. ![]() Maskable icons are adaptive icons that enable your icon to fill up the entire shape an operating system provides. The following web app manifest example uses a WebP image for the small icon, an ICO image for medium size icons, and a scalable SVG image for higher resolution icons:ĭepending on the operating system, the device capabilities, or the user theme, a mask may be applied to your icon to match a particular shape or color. To support all OSs and small sizes, create PNG versions of your icon as well. creating additional icons with fewer details and less complexity may be necessary. If your SVG icon doesn't scale down to small sizes nicely. Note that some operating systems support SVG icons which can help reduce the number of images you need to create since SVG can be scaled to any size automatically. You can also use a tool like PWA Image Generator to generate the necessary icon sizes for you from a single high-definition image. It's best to test your icon on all the devices and operating systems you want to support, and generate the sizes and image types that lead to the best results. I did try setting the BaseSize property to whatever. I tried this with multiple images, and this was never an issue using Xamarin and Android. The sizes at which your icon is displayed depend on the operating system and may change over time. When I assign a png as appicon to a MAUI app, I have an issue of odd scaling, which means that the given icon image does load, but it is cutting away a large section of the outer part of the image. For Android, see Google Play icon design specifications on. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |