> For the complete documentation index, see [llms.txt](https://edentech.gitbook.io/instahaul/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://edentech.gitbook.io/instahaul/flutter-app/change-app-icon-and-splash.md).

# Change App icon & splash

## **Change App Icon**

### **ANDROID**

Create your own icon and replace the ***launcher\_icon.png*** icons files in each folder according to the image size.

1. **/android/app/src/main/res/mipmap-hdpi/**
2. **/android/app/src/main/res/mipmap-mdpi/**
3. **/android/app/src/main/res/mipmap-xhdpi/**
4. **/android/app/src/main/res/mipmap-xxhdpi/**
5. **/android/app/src/main/res/mipmap-xxxhdpi/**

### **iOS**

Create your own icon and name it by size, replacing the icons in the folder below.

**/ios/Runner/Assets.xcassets/AppIcon.appiconset/**

<div align="left"><img src="https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/gNubM8HLX4wO8Qw6pldI/Screenshot%202021-03-20%20at%203.29.22%20PM.png" alt=""></div>

## **Change** Splash screen

### **ANDROID**

Create your own splash image and replace the ***splash.png*** files in each folder according to the image size.

* **/android/app/src/main/res/drawable-hdpi/**
* **/android/app/src/main/res/drawable-mdpi/**
* **/android/app/src/main/res/drawable-xhdpi/**
* **/android/app/src/main/res/drawable-xxhdpi/**
* **/android/app/src/main/res/drawable-xxxhdpi/**<br>

<div align="left"><img src="https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/PtOlBW6ibQw5mGSLDw3S/Screenshot%202021-03-20%20at%203.32.45%20PM.png" alt=""></div>

**Note:**  To change Splash Screen Background Color, go to **android/app/src/main/res/values/colors.xml** and change the splash\_color value

```bash
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splash_color">#YOUR_COLOR_CODE</color>
</resources>
```

<div align="left"><img src="https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/FWYGpBxIxvRoP6MJ0UGN/Screenshot%202021-03-20%20at%203.35.06%20PM.png" alt=""></div>

###

### **iOS**

Create your own splash image and name it by size, replacing the images in the folder below.

***/ios/Runner/Assets.xcassets/LaunchImage.imageset/***<br>

<div align="left"><img src="https://content.gitbook.com/content/qpzpUHpvEwV9ShSZ1v55/blobs/HjndKvklPZTr10xN9XpC/Screenshot%202021-03-20%20at%203.39.29%20PM.png" alt=""></div>

## **Using Command (Very Easy)**

**NOTE:** Please make a copy of the project before following the instructions below. Just incase the commands doesn't work as intended.

### App Logo

To change the **app logo** of the app, follow the steps below for **Android & iOS.**

* Go to **assets** folder
* Change the **app\_*****icon.png** t*o that of your choice. Please make sure the name remain the same.&#x20;
* You can import your custom image and rename it to **app\_*****icon.png***&#x20;
* Go to **pubspec.yaml**
* Find this code:

```yaml
flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/images/app_icon.png"
```

* Then run this command in your terminal to update the **app\_icon** of the app.

```bash
flutter pub get
flutter pub run flutter_launcher_icons:main
```

### Splash Screen

To change the **app splash** of the app, follow the steps below for **Android & iOS.**

* Go to **assets** folder
* Change the ***splash\_*****icon.png** to that of your choice. Please make sure the name remain the same.&#x20;
* You can import your custom image and rename it to ***splash\_*****icon.png**
* Go to **flutter\_native\_splash.yaml**
* Find this code:

```yaml
flutter_native_splash:
  image: "assets/images/splash_icon.png"
  color: "21a179"
```

* Also run this command in your terminal to update the **splash screen** of the app.

```bash
flutter pub get
flutter pub run flutter_native_splash:create
```