It seems that when using the Ionic Framework to develop a hybrid app for Android and iOS, the app launcher background is set to transparent somewhere which works for Android but not for iOS, which will then cause the launch background to be black, but I would like to figure out how to change the background color to white. Also the icon that I have saved in the resources folder for both Android and iOS seems to be overflowing to the edges of the launcher in iOS, so is there anyway to decrease the size of the launcher icon on the home screen only for iOS? I will add a screen shot of the app on the home screen soon.
The best way to go about doing this is to make sure transparency is off for the image going to be used as the app icon and to use makeappicon.com. You may have to play around with the size of the background either in Adobe Photoshop or determining the best size of the background by using Snipping Tool in programs with a white or colored background like in Microsoft Word and then cropping the image.
Related
When launching a flutter built iOS application, I briefly get this black background surrounding the launch screen. How would you change the black background depicted in the image? I tried changing the launch screen background color in Xcode, but I still get this black "border".
The black "border" in the opening app animation has to do with the way the default flutter icons were generated. I generated my own icons using this generator, and the app animates as intended.
I have auto generated app icon using "ionic cordova resources ios" command.The icon generated for iOS having black border around the app icon and not looking properly .Do we need to manually create the icons with recommended iOS app icon sizes? . Has anyone faced similar kind of issues?. please suggest.
Note :The icon is having For android icon looks good at all different resolutions
As Ionic using automated Icon generation for iOS and Android app and due to that your Icon have black border around.
Black border reason :
Your Main Icon have some transparency or transparent area around your Icon. or may be your Icon is already have corner radius.
Solution : Please remove transparency from your icon and corner radius and again generate your iOS icon will remove black border.
Note: iPhone OS automatically add corner radius so not required to add
it in our app icon.
Hope this Info will help to solve your problem!
I have added an icon to my app. It has rounded edges and no background. The problem is that when I run an app on my device (iPhone 5) the icon has a black background behind the edges as if it wasn't transparent. Any solutions?
From the apple developer website after a quick search:
Avoid transparency. An app icon should be opaque. If the icon’s boundaries are smaller than the recommended sizes—or you use transparency to create “see-through” areas—the resulting icon can appear to float on a black background, which tends to look especially unattractive on the beautiful wallpapers that users choose.
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
Edit: Also, check the related questions before you confirm your post - Is is possible to use transparency in an iPhone app icon?
On IOS use just square icons, if you use rounder icons you will have black margin black background.
I have been trying to solve this app icon color issue all morning. I am still experiencing this after going through both of these highly recommended photoshop/iOS design articles:
http://davidmckinney.com/blog/2013/12/31/designing-iphone-apps-how-to-setup-photoshop
http://bjango.com/articles/photoshop/
Here is the problem that I am having:
When creating my app's icon, the color that I see in Photoshop is the exact same color that I see in xcode's asset catalog. It is also perfect when I run the app on the iOS simulator.
However, when I run my app on my iPhone the app icon's color is always darker.
What's weird, is if I take a screenshot of my iPhone's screen and email it to myself, the color is correct! So for some reason the color is only darker when you are actually looking at the iPhone's screen.
Pardon my ignorance, but this is the first design I have ever done for an iOS app and I don't understand why this is happening or how to fix it.
EDIT: I am now using LiveView after reading this answer: https://stackoverflow.com/a/3597221/3344977
What's funny is no matter how hard I try I cannot get the color I see on my screen to appear on my iPhone screen. It's as if this shade of Pink I'm trying to use just isn't possible to render on an iPhone display.
This is because your iPhone and Monitor screens have different color calibrations (if that's the right term)
You're going to want to setup a color profile on your computer that matches the iPhone screens as closely as possible, and use that when developing icons.
for some reason the color is only darker when you are actually looking at the iPhone's screen
Consider turning up the brightness on your iPhone. Go to Settings->Wallpapers & Brightness to adjust it.
In any case, the issue isn't that the value of the color is changing on your device, it's just that that color value is being rendered differently.
Its because the resolution of your screen is different than your iOS device try it on other device
I want to know is there any way i can show the app icon with a transparent background, for example a white circle and the area around it as transparent, thought the image har transparent canvas. But app shows black background of the circle icon.
All relies are welcomed.
Your app icon will be displayed as the same sized round-cornered square button as all the other apps -- there's no way to truly make it look like a round button, for example.
If you control the device(s) on which the app will be installed, then you can add a background to your icon that matches the wallpaper on the device. Don't forget to turn off the shine effect by setting the UIPrerenderedIcon flag in your Info.plist to YES.