Generate Adaptive Icon For Your App Easily

A small guide by me :slightly_smiling_face:
As you all know, Kodular just added support for adaptive icons in recent update (Version 1.4B.0) and I had to update icon for one of my app.
In this guide, I’ll show you how you can generate adaptive icon for your app.

Step 1:

Go to https://easyappicon.com/

Step 2:

Upload your transparent icon or logo by clicking on Choose file…

image
In my case, it was

Step 3:

Increase or decrease padding to your choice. I left it at 0%
image

Step 4:

Change background colour to your choice. I changed it to White.
image

Step 5:

Now download icons by clicking on Download button and then iOS + Adaptive Icon
image
image

Step 6:

You’ll get a zip file containing icons.
image
Now, if your app is on :google_play: PlayStore, upload playstore-icon.png to your store listing.
And playstore-icon.png is your icon you need to upload to your project in :kodular:Kodular.
Mine is


Maybe difference is not much visible here in community but you’ll surely notice it in launcher.

That’s it :smiley:!
Happy Koding :kodular:

14 Likes

Excellent tool!

3 Likes

Perfect Tool!! :heart_eyes:

1 Like

Excellent work dude. But i Don’t know why we need adaptive icon.

1 Like

You can learn about adaptive icons in detail by reading following article:


Or this:

3 Likes

can you explain me in some simple words

Adaptive icons, as its name implies, adapt to different shapes and sizes as required by the launcher.

2 Likes

Well, see this topic:

If you don’t update your app icon to adaptive now, your app’s icon will show up in launcher like in the above topic.
To solve the problem and having a perfectly shaped icon, you’ve to update your icon.

See following gifs


Your icon (inner layer) will remain same but outer layer will be changed according to launcher settings.
And your icon will not be cutout.

https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

2 Likes

Hey there @FahadAhmad
It’s such an easy tutorial …

But I have a question
If I uploaded the adaptive icon on kodular it will be square. Right?
Then whenever I send a push notification using onesignal then the notification bar icon will be like :white_large_square:
It doesn’t seem well…
So if I edited and cropped some area of it and made it a transparent png then it will somehow look like this on notification bar :white_square_button:
.
.
Will this edited affect the adaptiveness of the icon?

1 Like

Yup! That’s really an issue I didn’t notice before.
It really doesn’t look good.

Maybe, @Kodular team can answer this well.

1 Like