Ionic-cli: ionic resources gerenating black background for iOS

Created on 3 Aug 2015  路  12Comments  路  Source: ionic-team/ionic-cli

I'm following instructions from
http://ionicframework.com/docs/cli/icon-splashscreen.html
to generate icons for both Android and iOS app.

I have a psd with the icon and some of it is transparent. For Android it's ok, the icon appears with the transparency. In iOS (on iPhone 5, iOS version 8.3), what is transparent appears black. I thinthis is because iOS doesn't show transparent icons, it's always a full square.
How can I generate the icon with white color on the bg, instead of black, for iOS? Is it something I have to do when I'm working on the .psd file?

Most helpful comment

Still generating black background. I mean, seriously, why do you publish a feature that is useless ;(
What to include? Just create a transparent png icon and run ionic resources icon --force and see the result.

All 12 comments

I know IOS doesnt take a transparent background but I am trying to find out if its possible to change the default background color for the IOS icons.

@Duovili I exported a .png file with blank bg into the resources/ios folder and then generated the icons for iOS. It worked ok. If the ionic-cli had an parameter to replace the transparency with a certain color, it would be great. I know that with imagemagick it's possible (http://stackoverflow.com/questions/2322750/replace-transparency-in-png-images-with-white-background), but I don't know what the resources generator from Ionic use to handle the images.

Greetings @chrisbenseler!

I've closed this issue because my sensors indicated it was old and inactive, and may have already been fixed in recent versions of Ionic. However, if you are still experiencing this issue, please feel free to reopen this issue by creating a new one, and include any examples and other necessary information, so that we can look into it further.

Thank you for allowing me to assist you.

Still generating black background. I mean, seriously, why do you publish a feature that is useless ;(
What to include? Just create a transparent png icon and run ionic resources icon --force and see the result.

+1 Same here on ios ... PNG with Black Background (icon and splash)

Same here on iOS.

Any solution ?

Same here with the app icon on iOS.

Still having this problem ios, android - my only workaround was to point directly to my icon.png from resources

@adamdbradley.... the issue is not fixed, I have the same problem as many others...
"may have already been fixed in recent versions of Ionic" ...? did you verify before closing it?

same here too

It's default behaviour for iOS. Should be opaque.

Check out docs they explain how you can generate icon per platform easily: http://blog.ionic.io/automating-icons-and-splash-screens/

Platform Specifics
Want different icons for the iOS and Android versions of your app? No problem; we鈥檝e got that covered, too. To use different source images for individual platforms, place the source image in the respective platform鈥檚 directory. To use a different icon for Android, the image should follow this path: resources/android/icon.png, and the image for iOS should use this path: resources/ios/icon.png. This way, you can have an iOS icon with native rounded corners and an Android icon with a transparent background.

Was this page helpful?
0 / 5 - 0 ratings