Saturday, July 24, 2021

App icon for Android, IOS, React Native

Android and IOS both have their own set of rules for creating app icons. For React Native, since it’s cross platform, but it still has to follow the app icon rules for Android and IOS.

App icon for Android

App Icon file name: ic_launcher.png, ic_launcher_round.png

App Icon file size: mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi

App Icon file locations:

  • app/src/main/res/mpimap-hdpi/ic_launcher.png
  • app/src/main/res/mpimap-hdpi/ic_launcher_round.png
  • app/src/main/res/mpimap-mdpi/ic_launcher.png
  • app/src/main/res/mpimap-mdpi/ic_launcher_round.png
  • app/src/main/res/mpimap-xhdpi/ic_launcher.png
  • app/src/main/res/mpimap-xhdpi/ic_launcher_round.png
  • app/src/main/res/mpimap-xxhdpi/ic_launcher.png
  • app/src/main/res/mpimap-xxhdpi/ic_launcher_round.png
  • app/src/main/res/mpimap-xxxhdpi/ic_launcher.png
  • app/src/main/res/mpimap-xxxhdpi/ic_launcher_round.png

To change or update the app icon for Android, just replace the icon images in those image folders.

App icon for Android

  1. App Icon file name: Icon-size.png
  2. App Icon file size: 40, 58, 60, 80, 87, 120, ,121, 180, 1024, etc

App Icon file locations: Images.xcassets/AppIcon.appiconset

To change or update the app icon for IOS, launch XCode, navigate to Images.xcassets folder from the left directory panel, and then select AppIcon, then drag icon images to the appropriate location.

Generate App Icons

For Android, it can be done in Android Studio. File -> New -> Image Asset, or it can be done via a online Android icon generator at https://romannurik.github.io/AndroidAssetStudio/icons-generic.html

For IOS, search for IOS app icon generator and you should find a lot of online tools for generating IOS and Android app icons.

References:

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/

https://developer.android.com/studio/write/image-asset-studio

Source: https://www.codexpedia.com/android/app-icon-for-android-ios-react-native/

1 comment:


  1. Thanks for this information. it is helpfull and worthy
    Laptop Repair Center offers quality service for your laptop at a reasonable cost. We offer doorstep support, 24*7 onsite support, repair all brand laptops, have an expert team for onsite support, and much more. for more contact us on 7291903784
    laptop repair center in Delhi

    ReplyDelete