---
title: "How to customize the main icons of your app | Tutorials - GoodBarber"
description: "Hello and welcome to your new GoodBarber tutorial\r \r Today we’re going to learn how to customize the app icons\r \r This is a mandatory step to generate your app\r \r The icon is a key visual eleme…"
canonical_url: "https://www.goodbarber.com/tutorials/design/how-to-customize-the-main-icons-of-your-app/"
lang: en
---

# How to customize the main icons of your app | Tutorials - GoodBarber

[Back](https://www.goodbarber.com/tutorials/)

# How to customize the main icons of your app

Hello and welcome to your new GoodBarber tutorial

Today we’re going to learn how to **customize the app icons**

This is a mandatory step to generate your app

The icon is a key visual element of your app. It will be used as favicon by the web browsers, displayed in the push notifications to identify the sender, on the home screen of your users device.

To set up the icons, lets go to the menu **My app > Design > general design**

Open the icon menu

You can use the assistant or create a completely custom icon

We’ll start with the assistant

Here you can add text or a logo

For example, I want to display the initials of my spa Freyja. All I need to do is enter them in the text box
Voila

If I prefer a logo, I simply need to click on the tab like this and upload an image in the required dimensions

Let’s stick to the text

On the right side menu, I can set the font, text color and effects

Then I create the background of my icon: a color or an image from the unSplash library of the back office or from my computer.

That's wht i;m going to do

And voila my icon is ready!

All I need now is to edit the title of my app, that will be displayed on the home screen of your clients devices

Perfect!

Click on generate and confirm the modifications

The icona are automatically generated in the required format for all possible uses.

That was easy no?

Now let’s try the custom option
Now, that couldn't be any easier. Simply upload tour already created icon (in the required sizes)

And it’s done!

You now know how to customize your app icon

See you very soon for another tutorial!

## Related videos

[DesignHow to set up your header](/tutorials/design/how-to-set-up-your-header/)

![How to set up your header](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DesignHow to set up the global style of your app](/tutorials/design/how-to-set-up-the-global-style-of-your-app/)

![How to set up the global style of your app](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DesignHow to customize the splashscreen of your app](/tutorials/design/how-to-customize-the-splashscreen-of-your-app/)

![How to customize the splashscreen of your app](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DesignHow to set up the navigation mode of your app](/tutorials/design/how-to-set-up-the-navigation-mode-of-your-app/)

![How to set up the navigation mode of your app](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DesignHow to customize the icons of your menu](/tutorials/design/how-to-customize-the-icons-of-your-menu/)

![How to customize the icons of your menu](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DesignHow to design your sections](/tutorials/design/how-to-design-your-sections/)

![How to design your sections](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DesignHow to copy the design of a section](/tutorials/design/how-to-copy-the-design-of-a-section/)

![How to copy the design of a section](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DesignHow to set up your home page](/tutorials/design/how-to-set-up-your-home-page/)

![How to set up your home page](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DesignHow to choose your header size ?](/tutorials/design/how-to-choose-your-header-size/)

![How to choose your header size ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)

[DesignHow to customize the background of your app](/tutorials/design/how-to-customize-the-background-of-your-app/)

![How to customize the background of your app](https://portal.ww-cdn.com/portal_static/images/thumbnail_background.01a5a9e37ad2.jpg)