Today, we're going to take a look at how we can make beautiful app
icons in seconds and import them into any iOS and Android application.
So tune in.
Hi everyone.
I'm James Monson, Magna.
I'm a mobile developer and I've been building out a Xamarin application
to track coffee consumption here on my YouTube channel.
Every single week.
I put out new videos showing how to get started with Xamarin and creating a
full application from start to finish.
Now, one of the most important things in an application is that app icon.
It's the thing that you see in the app store.
It's the thing that your users.
Launch is on the app on your iOS or Android device.
And it's really, really important.
It's the identity of your application.
Now, if you have a professional graphics team, they're probably
going to go ahead and put together everything for you, so you can easily
import them into your application.
But if you're like me near a solo developer, you need a little bit of help.
And that's where an awesome website comes in called easy app icon.
I'll let you generate responsive app icons in seconds.
So let's go over and check it out.
Now, like I said, I've been building out this coffee application, we've
been going ahead and doing this here, and this is just the default template.
So actually we can see that there's this my coffee application
that uses the Xamarin logo here.
I have a few other app icons on here as well.
This is the Peloton clone that I've also been building out to.
Now this is responsive.
So as you sort of move around, you can see a kind of move inside
of there, which is kind of cool.
And that's the adaptive icons on Android.
IOS all the icons are just static images and an asset, um, um, catalog
that you can put together, but let's go ahead and spice this up.
Let's go ahead and make this better.
So I'm going to do is head over to the browser.
And of course, this is where I've been building up this application.
So if you're interested, check out over there for links to all
the other playlist items, we're going to go to easy app icon.com.
That's it.
That's the one place you go for?
iOS and Android legacy or adaptive icons all in one place.
So you can come in and you can pick anything.
You want any foreground image, you can adjust the padding, you
can adjust the background color.
So let's go ahead and do it.
Now.
The thing that you'll need is some sort of icon here.
I have a coffee cup, which we can see right here, here it is.
And it automatically tries to detect a background color for me.
So we see the different, um, uh, images here on, on legacy
on round, on full bleed.
That's going on here.
And we can adjust the paddings.
We want a little bit more padding here that looks a little bit better and we can
adjust the background color to, we could have a picker come up, uh, over here so
we could say, you know, I actually use.
A white, for example, or maybe we want a different purple here.
That looks pretty good.
So that's it, I've just pretty much set up my app icon.
Everything's kind of good to go.
Right.
I chose an image.
This image is from Emojipedia, but you know, you would have your own graphic that
your app icon logo would be choose that.
And then, you know, your actual, uh, Name of the icon you want, like see launcher.
That's how I've always been now.
It's cool.
Here is that you can see it specifically on an iOS and Android device.
You can get kind of that real, you know what it's going to look like.
And you can just download it.
And we're going to download iOS and adaptive icons for Android.
If you want legacy icons, you can totally do that, but it'll generate our
icons and give us everything we need.
Let's go ahead and save that rent to our download folder.
Done.
Now what's nice here is that there's also Android instructions
and also iOS instructions.
So we'll take a look at that in a second here, but it
gives you everything you need.
Let's go and open up that folder.
Let me go into my downloads.
Let's go ahead and extract this here and we'll go in and we'll see
that we have an Android folder.
We get all of our Mitt maps.
So all of our launcher icons here.
Here's this, we've got four ground round icon and our launcher icon
gives you everything you need.
So back compat and forward compat, it also gives you an app store
logo, um, and also a web icon too.
So if you want to upload those to Google play and gives you some values.
For iOS, you get a simple, uh, app icon app icon set, and then also iTunes
artwork, which is kind of cool here.
So if you want those different sizes, you can have it.
So they're all there and they're ready to go.
So here's what we're going to do is we're going to come in yeah.
To visual studio.
Cause I'm using Xamarin here, but you would import this into your iOS
or Android application accordingly.
I'm going to import Android.
So I'm literally just going to take all of these folders.
And drag and drop them into my resources here.
And I'll say, apply to all.
Cause there's already, you know, images and icons in here.
You could then delete those.
The nice thing here is that those were called icon.
And now we see over here, icy launcher, icy launch around, and we
get new icons that are inside of here.
The next thing we need to do is delete from our main activity, the icon.
We don't need it at all because it will use the applications,
app icon for our launcher.
And that's all you need to do is just delete that from the main activity.
There was a few other things that you need to do.
So if you go over to our instructions, we'll see that over in our
application node, we're going to go ahead and, um, set these two.
So this icy launcher icon and round icon, this XML here, uh, is also set up
that you, you don't need to bring it in.
It's already, it's already there for us, the adaptive icon, and we
can take a look at that file that got brought in inside of our values.
There's our background color.
And then here is our launcher and launcher background.
So it automatically sets it up.
So it's showing you what it's going to go ahead and map to.
So if you want to change that color, you can do that later too.
So let's go into our properties, our Android manifest and under the
application node is where we're going to want to shove these.
So let's go ahead and just paste that in there.
And as we see, we have our theme.
We have our icon and our icon round, the round icons worked for somewhere
in the middle Android set, I would say, uh, for the iOS versions and then the
old launchers for way back, if you're doing Kit-Kat or, or something like that.
So let's give this a few seconds to compile up, but literally that's it.
You just drag and drop the files in there.
And you're good.
Now note though that I still have my old icons in here, I could have named it icon.
That would have been pretty good.
And it would have given me the same exact files to override it, but we can kind of
see that we have all of these things here.
All right.
Now our application is launched again.
And once it's up, we should be able to go here and there it is.
There's the coffee right there.
And you can see as I drag it around on here and we get the
new, uh, my coffee right here.
So we have multiple on the home screen.
There we go.
It's all adaptive and totally ready to go.
100% now over on iOS, it's even easier.
Actually, if you come into your iOS projects, you'll see asset
catalogs and assets here, there is an existing asset called app icon.
So one thing I like to do is rename this first and call it app icons.
Here or maybe like old and save it in here.
You can then come in and say, add app icons and you can add a new app icon
set, but there's this import option here.
So if you hit import, this will let you browse for it.
So I'm going to go and find my folder.
So here's downloads, um, downloads.
There we go.
Launch icons.
IOS have by concept, there it is select it, and that should
import it into visual studio.
You can do the same exact thing over on visual studio for Mac, uh, there.
So I like to keep the old ones around.
I've found that sometimes it's a little bit weird if you delete that
and you don't have anything imported there, but this will give you all
of the different icons that you need that are modern inside of it.
After that you can open up your info P list.
Um, you can make sure everything is set inside of here.
Um, I usually like to double check my app icon.
So now we'll see that there's multiple app icons inside of here
and we should be able to set it.
And now what I'm going to do is I'm going to go ahead and open up visual
studio for Mac actually launched this on an iOS simulator so we can take a look.
So let's hop over there.
All right now, here we are over in visual studio for Mac and here we
can see our old app icons and we can see the new app icons right here.
And of course you can come in and you can select if you want other app icons
in here and update those two, this gives you kind of everything you need.
Inside the info P list.
We'll see right down here under application and app icons.
I have that app icon selected.
Let's just go ahead and run it and see what it looks like.
Now.
Of course the iOS simulator comes up and what we should see when I
hit the home is the new app icon.
There it is.
Perfect.
Purple and my coffee cup right there.
There it is on iOS.
All right there, you have it in just moments that we have our application
up and running with beautiful new app icons for iOS and Android.
Have you are doing windows UWP applications.
You can take that same exact app icon that you have, and actually
you can just import it into visual studio and it'll generate all of the
assets that you need automatically.
So no need to worry about what about my windows application?
You can just use that.
Super-duper nice.
You can also leverage some of these assets if you're doing Macko S applications
as well, but you probably want to go ahead and tune those up a little bit
more for your application and what you want to see in the app drawer.
Anyways, there you have it.
I've soaked for hope that you enjoyed this dev tip how to get beautiful
applications that are adaptive and responsive into your apps.
Um, check out my YouTube channel for more.
Dev tips and Zara and one-on-one videos.
But if you liked this video, give it a thumbs up that goes into
the Google algorithm of goodness and recommend it to other people.
And of course, don't forget to subscribe and click that notification
bell to stay up to date with all the videos I put out here on my channel.
Thanks for watching.