Hi and welcome back.
In this video, we're going to learn more about importance of customizing your app
icons and how to create custom app icons for your react native app.
App icons are the launch icons that are
displayed on the home screen of your mobile device.
When you install an app, they serve as a representation of your app
and help users easily identify and locate your app, amongst others.
App icons essential element of branding
and marketing your application. Using default
Android and Apple icons for your app may
make it look unprofessional and unappealing to users.
On the other hand, creating a custom app icon that represents your brand or company
can make your app more memorable and visually appealing.
In this lesson, we're going to learn an easy way
to generate custom app icons for your react native application.
And I'll show you how to use a tool to create app icons from an image and then
replace the default icons in your application with the new custom icons.
This process is quick and easy and ensures
that your app icon will look great on all devices.
I have chosen an image already that I have generated on Canva.com myself.
I decided to name this application Altru because it's a smaller version of a word
altruistic, and I think donation and helping other people is very altruistic.
So this is going to be an image that we're going to generate our logos from.
I find that makeappicon.com is a great
website that generates all kinds of icons that you might need for your application.
So we're going to use this to simply generate all of the files that we might
need for our react native application icons.
So let's choose our ultru PNG file.
I'm going to skip these steps.
You can inter your email here,
click on Download, and the icons are going to be emailed to you.
I already did this, so I'm just going to go here and download the zip file.
Great.
I just want to quickly show you how our app icons look currently.
So, for donation app, this is the Apple's default icon, which means no icon.
And for the Android, it looks like this.
So we're going to be replacing these,
rerunning our application to see how our application icons look like.
Let's start with android.
So to locate your current icons,
you just need to go to Android folder, and then Application, then Source,
then Main, and then res directory here and here are all our icons.
This is what determines what kind of icons
will be shown to your user according to their device.
So all we want to do is just go to our finder and see what we have inside.
So we have generated icons for Android and here are our icons.
And all we want to do is replace
the contents of these items with the content of these images.
So I'm just going to make this smaller
and I'm going to start transferring these items here.
The first thing that we need is to replace the hdpi images.
And here we go. We have these images right here.
So I'm going to put them here and I'm going to overwrite them.
I'm going to do the same for MDPI images.
I'm going to put them here, refactor and overwrite.
Same for here.
And then I'll do the same for these two folders as well.
Great.
Now we have new icons and this is how they look like.
And as we go to the end of these
directories, our resolution for the App icons will grow.
And this is intentional.
Now let's see how this will change our App icon displayed on the Android device.
Great, this has been completed.
And now I'm just going to go out of this application.
And here is how our App icon looks like on Android right now.
So let's do the same for iOS.
To do the same for iOS, please go to your Donation Application
iOS folder and locate Donation App x Workspace File.
So you'd go here and then iOS and then Workspace File.
Just open this up and go to the folder section here.
Then go to donation application see its contents and open the donation
application main directory and click on Images.
And if you click on App Icons, this is going to appear here.
Now let's start transferring altrue files inside here.
So let's go to iOS folder here and then App Icon set
I'm just going to go inside here and view this as a list.
And here we see that we need 40 by 40 image.
We could just grab this one here and then we need 60 x 60 image.
And there is no 60 x 60 image here because
this will be 120 pixels because it's going to be 60 times two.
So if we want 60 x 60, then we're going to have to grab this one.
Great.
And then we need 58 by 58 so we can grab this one.
And then we can grab this one here.
And we need 80 by 80.
So we could use this one for that.
We can grab itunes artwork for this file here.
So that's it.
I'm going to quickly delete this app here
and I'm going to rebuild this. And here we go.
We see our donation application displayed here with our logo.
So this is how you change your App icons on iOS and Android devices.
In the resources of this video, I am going to put links that you could use
whenever you decide to build your own applications.
And just remember that customizing your
App icon is an important part of branding and marketing your app.
By choosing a well designed app icon
that represents your brand, you can create a memorable and visually
appealing app that stands out from the rest.
In this lesson, we learned how to generate
custom App icons from an image and place default icons in your react native app. Use
this knowledge to create a unique and attractive app icon that represents
your brand and captures the essence of your application.
Thanks so much for watching and I'll see you in the next video.