How to change the application launcher icon on Flutter

Question

When I create an app with a flutter create command  the flutter logo is used as an application icon for both platforms  If I want to change the app icon  shall I go to both platforms directories and replace images there   by platforms directories I mean  myapp ios Runner Assets xcassets AppIcon appiconset for iOS and myapp android app src main res for Android  Or is it possible to define an image as a Flutter Asset and the icons are generated somehow

User · Answer

I use few methods for chaging flutter app lancher icon but only the manuall method is a bit easy and good. Because you will know how it work.

So to change flutter ios icon. First get copy of your icon 1024×1024 pixel and generate set of icons for android and ios using appicon.co generator. When you get zip file it work contact two folder ios and android open ios folder and copy folder and replace the one in your ios/runner directory.

For android copy all folder present in android folder and replace the ones present in the android/app/src/main/res/drawable here.

After replacing folder on both ios and android stop the app and re run and your icons will be changed.

User · Answer

When a new Flutter app is created  it has a default launcher icon  To customize this icon  you might want to check out the flutter launcher icons package  Alternatively  you can do it manually using the following steps  This step covers replacing these placeholder icons with your app   s icons  Android  Review the Material Design product icons guidelines for icon design   In the  lt app dir gt  android app src main res  directory  place your icon files in folders named using configuration qualifiers  The default mipmap- folders demonstrate the correct naming convention   In AndroidManifest xml  update the application tag   s android icon attribute to reference icons from the previous step  for example   lt application android icon  quot  mipmap ic launcher quot         To verify that the icon has been replaced  run your app and inspect the app icon in the Launcher    iOS  Review the iOS App Icon guidelines  In the Xcode project navigator  select Assets xcassets in the Runner folder  Update the placeholder icons with your own app icons  Verify the icon has been replaced by running your app using a flutter run

User · Answer

The one marked as correct answer  is not enough  you need one more step  type this command in the terminal in order to create the icons  flutter pub run flutter launcher icons main

User · Answer

Flutter Launcher Icons has been designed to help quickly generate launcher icons for both Android and iOS  https   pub dartlang org packages flutter launcher icons  Add the package to your pubspec yaml file  within your Flutter project  to use it Within pubspec yaml file specify the path of the icon you wish to use for the app and then choose whether you want to use the icon for the iOS app  Android app or both  Run the package Voila  The default launcher icons have now been replaced with your custom icon  I m hoping to add a video to the GitHub README to demonstrate it Video showing how to run the tool can be found here  If anyone wants to suggest improvements   report bugs  please add it as an issue on the GitHub project  Update  As of Wednesday 24th January 2018  you should be able to create new icons without overriding the old existing launcher icons in your Flutter project  Update 2  As of v0 4 0  8th June 2018  you can specify one image for your Android icon and a separate image for your iOS icon  Update 3  As of v0 5 2  20th June 2018  you can now add adaptive launcher icons for the Android app of your Flutter project

User · Answer

Follow simple steps  1  Add flutter launcher icons Plugin to pubspec yaml e g  dev dependencies     flutter test      sdk  flutter    flutter launcher icons   quot  0 8 1 quot   flutter icons    image path   quot icon icon png quot     android  true   ios  true  2  Prepare an app icon for the specified path  e g  icon icon png 3  Execute command on the terminal to Create app icons    flutter pub get   flutter pub run flutter launcher icons main To check check all available options and to set different icons for android and iOS please refer this Update  flutter launcher icons 0 8 0 Version  12th Sept 2020  has Added flavours support Flavors are typically used to build your app for different environments such as dev and prod The community has written some articles and packages you might find useful  These articles address flavors for both iOS and Android  Hope this will helps others

User · Answer

Setting the launcher icons like a native developer I was having some trouble using and understanding the flutter launcher icons package  This answer is how you would do it if you were creating an app for Android or iOS natively  It is pretty fast and easy once you have done it a few times  Android Android launcher icons have both a foreground and a background layer    image adapted from Android documentation  The easiest way to create launcher icons for Android is to use the Asset Studio that is available right in Android Studio  You don t even have to leave your Flutter project   VS Code users  you might consider using Android Studio just for this step  It s really very convenient and it doesn t hurt to be familiar with another IDE   Right click on the android folder in the project outline  Go to New  gt  Image Asset   Try right clicking the android app folder if you don t see Image Asset as an option  Also see the comments below for more suggestions   Now you can select an image to create your launcher icon from   Note  I usually use a 1024x1024 pixel image but you should certainly use nothing smaller that 512x512  If you are using Gimp or Inkscape  you should have two layers  one for the foreground and one for the background  The foreground image should have transparent areas for the background layer to show through     lion clipart from here  This will replace the current launcher icons  You can find the generated icons in the mipmap folders   If you would prefer to create the launcher icons manually  see this answer for help  Finally  make sure that the launcher icon name in the AndroidManifest is the same as what you called it above  ic launcher by default   application android icon  quot  mipmap ic launcher quot   Run the app in the emulator to confirm that the launcher icon was created successfully  iOS I always used to individually resize my iOS icons by hand  but if you have a Mac  there is a free app in the Mac App Store called Icon Set Creator  You give it an image  of at least 1024x1024 pixels  and it will spit out all the sizes that you need  plus the Contents json file   Thanks to this answer for the suggestion  iOS icons should not have any transparency  See more guidelines here  After you have created the icon set  start Xcode  assuming you have a Mac  and use it to open the ios folder in your Flutter project  Then go to Runner  gt  Assets xcassets and delete the AppIcon item   After that right-click and choose Import     Choose the icon set that you just created  That s it  Confirm that the icon was created by running the app in the simulator  If you don t have a Mac    You can still create all of the images by hand  In your Flutter project go to ios Runner Assets xcassets AppIcon appiconset   The image sizes that you need are the multiplied sizes in the filename  For example  Icon-App-29x29 3x png would be 29 times 3  that is  87 pixels square  You either need to keep the same icon names or edit the JSON file

User · Answer

Follow these steps - 1  Add dependencies of flutter luncher icons in pubspec yaml file You can find this plugin from here  2  Add your required images in asstes folder and pubspec yaml file as below   pubspec yaml name  NewsApi org description  A new Flutter application     The following line prevents the package from being accidentally published to   pub dev using  pub publish   This is preferred for private packages  publish to   none    Remove this line if you wish to publish to pub dev  https   developer apple com library archive documentation General Reference InfoPlistKeyReference Articles CoreFoundationKeys html version  1 0 0 1  environment    sdk   quot  gt  2 7 0  lt 3 0 0 quot   dependencies    flutter        sdk  flutter       The following adds the Cupertino Icons font to your application      Use with the CupertinoIcons class for iOS style icons    cupertino icons   1 0 1   fluttertoast   7 1 6   toast   0 1 5   flutter launcher icons   0 8 0     dev dependencies    flutter test      sdk  flutter  flutter icons    image path   quot assets icon newsicon png quot    android  true   ios  false    The following section is specific to Flutter  flutter       The following line ensures that the Material Icons font is     included with your application  so that you can use the icons in     the material Icons class    uses-material-design  true   assets      - assets images dropbox png      fonts      - family  LangerReguler       fonts          - asset  assets langer reguler ttf         fonts        - family  Schyler         fonts            - asset  fonts Schyler-Regular ttf           - asset  fonts Schyler-Italic ttf             style  italic       - family  Trajan Pro         fonts            - asset  fonts TrajanPro ttf           - asset  fonts TrajanPro Bold ttf             weight  700         For details regarding fonts from package dependencies      see https   flutter dev custom-fonts  from-packages  3  Then run the command in terminal  flutter pub get and then flutter luncher icon This is what  I get the  result after the successfully run the command   And luncher icon is also generated successfully  My Terminal  E  AndroidStudioProjects FlutterProject NewsFlutter news flutter gt flutter pub get Running  quot flutter pub get quot  in news flutter                          881ms  E  AndroidStudioProjects FlutterProject NewsFlutter news flutter gt flutter pub run flutter launcher icons main   --------------------------------------------      FLUTTER LAUNCHER ICONS  v0 8 0    --------------------------------------------      Creating default icons Android     Overwriting the default Android launcher icon with a new icon    Successfully generated launcher icons

User · Answer

I have changed it in the following steps   1  please add this dependency on your pubspec yaml page    dev dependencies    flutter test      sdk  flutter   flutter launcher icons   0 7 4   2  you have to upload an image icon on your project which you want to see as a launcher icon   i have created a folder name image in my project then upload the logo png in the image folder   Now you have to add the below codes and paste your image path on image path  in pubspec yaml page   flutter icons    image path   images logo png    android  true   ios  true   3  Go to terminal and execute this command   flutter pub get   4  After executing the command then enter below command   flutter pub run flutter launcher icons main   5  Done  N B   of course add an updated dependency from      https   pub dev packages flutter launcher icons -installing-tab-

User · Answer

you can achieve this by using   flutter launcher icons in pubspec yaml   another way is to use one for android and another one for iOS

User · Answer

I would suggest You to use this website Linked Below  App Icon Creator  Step-1  upload The Image   Step-2  Make necessary Changes And Click on download dont change the file name   Step-3  Extract the Downloaded Zip File In the respective folder  android app src main res

User · Answer

You have to replace the Flutter icon files with images of your own  This site will help you turn your png into launcher icons of various sizes   https   romannurik github io AndroidAssetStudio icons-launcher html

User · Answer

Best  amp  Recommended way to set App Icon in Flutter  I found one plugin to set app icon in flutter named flutter launcher icons  We can use this plugin to set the app icon in flutter   Add this plugin in pubspec yaml file in project root directory  Please check below code   dependencies       flutter        sdk  flutter      cupertino icons   0 1 2      flutter launcher icons   0 7 2 1        Save the file and run flutter pub get on terminal   Create a folder assets in the root of the project in folder assets also create a folder icon and place your app icon inside this folder  I will recommend to user 1024x1024 app icon size  I have placed app icon inside icon folder and now I have app icon path as assets icon icon png  Now  in pubspec yaml add the below code    flutter icons       android   quot launcher icon quot       ios  true      image path   quot assets icon icon png quot    Save the file and run flutter pub get on terminal  After running command run second command as below  flutter pub run flutter launcher icons main -f pubspec yaml   Then Run App

User · Answer

Best way is to change launcher icons separately for both iOS and Android   Change the icons in iOS and Android module separately   The plugin produces different size icons from the same icon which are distorted   Follow this link  https   flutter dev docs deployment android

[flutter] How to change the application launcher icon on Flutter?

Examples related to flutter

Examples related to dart

Examples related to appicon

Examples related to application-icon

Examples related to flutter-appicon