/Beginner

Add app icons to your flutter application

Before this tutorial you should have set up your development environment with How to Install Flutter on Mac OS and ran your first application with Your First Flutter Application.

Before starting double check that the sdk and simulators/emulators are correctly installed and setup by running flutter doctor.

For this tutorial we are going to take the Markdown Editor Application that we have built in a previous article and release it to both AppStores.

Entries in the serie:

Automatically

You can use the flutterlaunchericons package to automatically generate all the icons for your application. Before doing that you need to have your android icon file and your iOS icon file. Remember that the iOS file can’t have any transparency (all the background needs to be filled).

Open your “pubspec.yaml” and under “dev_dependencies” add:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons:#<- add

Right under you need to add the configuration:

flutter_icons:
  android: "ic_launcher"
  ios: true
  image_path: "icons/android.png"
  image_path_ios: "icons/iOS.png"
  adaptive_icon_background: "#4D92F7"

“android:” is the filename of the generated android icon “ios:” if you also need to generate the iOS icons “imagepath:” the location of the source image used to generate the android icons “imagepathios:” the location of the source image used to generate the iOS icons “adaptiveicon_background:” the main background color of the image used to fill the background for bigger launch images

Now we need to manually execute the package to generate the icons. Open your terminal (also navigate to the directory of your project) and run flutter packages pub run flutter_launcher_icons:main.

After a short while you will find the generated icons already included in both Android and iOS applications.

That’s it. You can open the projects manually if you want to only change specific icons. The nice thing about this package is that it doesn’t force you to have only one icon across both platforms and that you can customize a lot about how your icons are going to look and feel.

Manually

If you don’t want to use a specific package and prefer to do everything manually you can follow the steps below. It will be obviously more time consuming, but you will have control on how every single icon so you can make different icons for different sizes if you so prefer.

Generate the icons

The first step is to generate all the icons in the various screen sizes. You can do it manually using your favorite image editor like Photoshop or command line tool such as ImageMagick. Otherwise you can use one of the many free websites to automatically generate them. The advantage of most websites is that they’re already going to export the icons in the correct folder so that they get automatically recognized by both Xcode and Android Studio.

For this tutorial we are going to use a website from this list:

Any other website or tool with similar functionality is fine as well. If could even be a custom script using Image Magick.

You can choose any between them, the result is basically the same. Always be wary when using an external tool since you give them access to your images and you never know what they do with them.

Each websites asks for a different input image, but usually a single image 1024x1024 px is going to be fine anywhere.

Embed the icons in your application

The next step is to include the generated files in your application.

To open the project in Xcode and Android Studio respectively simply drag the ios and android folders on top of their icons. To include the icons and upload the application to the stores you should (and in the case of iOS must) use Xcode and Android Studio.

If you’ve generated the icons using a website or an automatic tool that is going to generate the whole folder structure for you it is enough to simply drag the android and ios folders to their right place in the filesystem. Otherwise you would need to manually drag each icon yourself.

Icons

On iOS you’d need to open the “Assets.xcassets” folder, inside you will find the “AppIcon” folder which includes the icons necessary for iOS. Remember that on top of these icons you are also are going to need graphic assets for the App Store page.

iconmdiOS

On Android you’d need to open the “res” folder, inside you will find all the various folders for the different screen resolutions: “hdpi”, “mdpi”, “xhdpi”, “xxhdpi” and “xxxhdpi”. Remember that on top of these icons you are also are going to need graphic assets for the Play Store page.

iconmdAnd

Launch Screen

On top of the icons you can also include a custom launch screen shown to the user while your application is launched and it was not in the background.

On iOS you will find the “LaunchScreen.storyboard” file in the “Runner” folder. Open it with Xcode to edit.

On Android you will find the “launch_background.xml” file alongside the icons inside the “res” folder, in the “drawable” subfolder.

Tablets

Be aware that your iOS and especially your Android application will run on many different screen dimensions. You should at least test on both a smartphone and a tablet to check the two form factor and if the images that you have added do not stretch and look off on a bigger screen.

Takeaway

You’ve learned how to add app icons to both the Android and the iOS application. Stay tuned for the next entry in the series when we are going to release the completed app to both stores.

Sources Material Icons Android Icons Apple iOS HID Automatically Resize Icons Automatically Resize Icons

Subscribe to Learning Flutter

Get the latest posts delivered right to your inbox

Valentino Urbano

Valentino Urbano

Valentino Urbano is an iOS and Web Developer from Milan, Italy. Working on his own he pursues his passions as a programmer.

Read More