Nylo home page
  1. Basics
  2. App Icons
Notice: You're viewing an old version of the Nylo documentation.
Consider upgrading your project to Nylo 6.x.
Basics

App Icons


Introduction

You can build all your app icons automatically using flutter pub run flutter_launcher_icons:main from the command line. This will take your current app icon in /public/assets/app_icon and auto-generate all your (iOS and Android) icons for you.

Your app icon should be a .png with the size dimensions of 1024x1024px

If you have custom icons for different operating systems you can also just add them manually. This guide will be useful for those needing a tool to build their icons for them.

Nylo uses the flutter_launcher_icons library to build these icons, to understand the library more you can check out their documentation too.


Generating app icons

You can run the below command from the terminal to auto-generate your app icons.

flutter pub run flutter_launcher_icons:main

This command will use the app icon located in your /public/assets/app_icon directory to make the IOS and Android app icons to the correct dimensions.


Adding your app icon

You can place your 'app icon' inside the /public/assets/app_icon directory.

Make your the icon filesize is 1024x1024 for the best results.

Once you’ve added your app icon you’ll then need to update the image_path if you’re filename is different to the default Nylo app icon name.

Open your pubspec.yaml file and look for image_path section, this is where you can update the image path for the file. Make sure that the “image_path” matches the location for your new app icon.


App icon filenames

Your filenames shouldn’t include and special characters, it’s best to keep it simple like “app_icon.jpg” or “icon.png”.


App icon filetypes

App icon needs to be a .png mime type, both Apple and Google have this in their guidelines for icons.

App icon attributes

Attribute Value
Format png
Size 1024x1024px
Layers Flattened with no transparency

If you are interested in learning more, you can view the official guidelines from both Google and Apple.

  • Apple’s human interface guideline is here
  • Google’s icon design specifications are here


Configuration

You can also modify the settings when generating your app icons. Inside the pubspec.yaml file, look for the flutter_icons section and here you can make changes to the configuration.

Check out the official flutter_launcher_icons library to see what's possible.