App icon showing round shape with White Background

milind_padshah · October 25, 2020, 6:39pm

I have Uploaded App icon, which has transparent background but when I export my App the background gets white color and round shape.

I want my App Icon to show as it is without White Background, Please help

I am uploading Icon after exporting App and my Original Icon in Uploaded in Asset

Vaibhav · October 25, 2020, 7:19pm

Go through this guide. May be it can help

iamwsumit · October 26, 2020, 1:29am

It is depend on device in mi phones it shows white background when icon is not in square or rectangle

milind_padshah · October 26, 2020, 6:07am

I other Apps on my device which shows transparent icon.

The attached icon App is installed on my Device, I want my icon tobe displayed like the attached icon.

The background color which you can see in attached file is of my device background and not of icon

bodymindpower · October 26, 2020, 6:48am

See here:

github.com/mit-cml/appinventor-sources

Adaptive icons have white edges

opened 04:17PM - 06 Oct 20 UTC

Vishwas-Adiga

bug status: new

**Describe the bug** Adaptive icons often have white edges that are at most a f…ew pixels wide. ![image](https://user-images.githubusercontent.com/28251020/95227673-028f8a00-081c-11eb-86cb-c9b3b9919e7c.png) These edges are a result of the background layer of the adaptive icon being set to `#FFFFFF`. On square images, the edges appear only on the centres of the top, bottom, left, and right edges. On circular images, the white area outlines the entire icon. In addition, the entire icon slides around when the icon is dragged, whereas the intended behaviour is to have only the foreground layer move around while the backdrop remains stationary. Further context: https://community.appinventor.mit.edu/t/problems-with-app-icon/4739 **Affects** - [ ] Designer - [ ] Blocks editor - [ ] Companion - [x] Compiled apps - [ ] Buildserver - [ ] Debugging - [ ] Other... (please describe) **Expected behavior** ![image](https://user-images.githubusercontent.com/28251020/95228134-93fefc00-081c-11eb-8f3b-d02c9aea7475.png) **Expected**: icon at the centre which has no white outline **Observed**: icons at the periphery which have white edges **Steps to reproduce** 1. Add any image to `Screen1`'s `AppIcon` property. 2. Compile the app and observe the icon **Possible fix** 1. Set the user's app icon as the adaptive icon's background layer. Pros: No white patches along the edges Cons: The wiggle/parallax/spring motion that comes with adaptive icons is lost; the icon is stationary. 2. Set the background layer of the icon from #FFFFFF (white) to #00FFFFFF (transparent). This will get rid of the artefacts while retaining the parallax motion. Pros: Motion is retained Cons: Motion is applied to the entire icon (this is not an issue introduced by this solution, rather a limitation of the system currently implemented in App Inventor). It is not possible to have, say in the other image attached above , the "k" ligature maintain motion while the background art stay stationary. 3. Add a new property called `AppIconForeground`. This will let the user set an optional foreground image for their app's icon that will slide when the icon is dragged. The `AppIcon` will act as the required background layer of the adaptive icon. This solves the issue with the edges while also letting advanced users leverage the full potential of adaptive icons. (Image credits to [Anke](https://community.appinventor.mit.edu/u/Anke))

Topic		Replies	Views
Transparent icon Discuss	10	901	April 17, 2021
Adaptive icon generation issues Discuss	5	723	July 7, 2020
Icon display problem Bugs bug	6	769	April 29, 2021
About Launcher Icon Discuss	6	606	March 28, 2021
Set Background Color for adaptive Icons IWant adaptive-icon	0	547	August 1, 2022

App icon showing round shape with White Background

Related topics