---
title: "Como customizar os principais ícones do seu app | Tutoriais - GoodBarber"
description: "Olá e bem-vindo ao seu novo tutorial da GoodBarber\r \r Hoje vamos aprender como customizar os ícones do aplicativo\r \r Esta é uma etapa obrigatória para gerar seu aplicativo…"
canonical_url: "https://pt.goodbarber.com/tutorials/design/como-customizar-os-principais-icones-do-seu-app/"
lang: pt
---

# Como customizar os principais ícones do seu app | Tutoriais - GoodBarber

[Voltar](https://pt.goodbarber.com/tutorials/)

# Como customizar os principais ícones do seu app

Olá e bem-vindo ao seu novo tutorial da GoodBarber

Hoje vamos aprender como customizar o**s ícones do aplicativo**

Esta é uma etapa obrigatória para gerar seu aplicativo

O ícone é um elemento visual chave do seu aplicativo. Ele será usado como favicon pelos navegadores da web, exibido nas notificações push para identificar o remetente, na tela inicial do dispositivo do seu usuário.

Para configurar os ícones, vamos começar pelo menu **Meu app > Design > Design geral**

Abra o menu do ícone

Você pode usar o assistente ou criar um ícone totalmente personalizado

Vamos começar com o assistente

Aqui você pode adicionar texto ou um logotipo

Por exemplo, quero exibir as iniciais do meu spa Freyja. Tudo o que preciso fazer é inseri-los na caixa de texto
Voilá

Se preferir um logo, eu simplesmente preciso clicar na guia assim e fazer upload de uma imagem nas dimensões necessárias

Vamos ficar com o texto

No menu do lado direito, posso configurar a fonte, cor do texto e efeitos

Então eu crio o fundo do meu ícone: uma cor ou uma imagem da biblioteca unSplash do backoffice ou do meu computador.

E é isso que eu vou fazer.

E voilà, meu ícone está pronto

Tudo o que preciso fazer agora é editar o título do meu aplicativo, que será exibido na tela inicial dos dispositivos de seus clientes

Perfeito!

Clique em gerar e confirme as modificações

Os ícones são gerados automaticamente no formato necessário para todos os usos possíveis.

Isso foi fácil, não?

Agora vamos tentar a opção personalizada
Agora, isso não poderia ser mais fácil. Basta carregar o seu ícone já criado (nos tamanhos necessários)

E está pronto!

Agora você sabe como customizar o ícone do seu aplicativo

Até breve para mais um tutorial!

## Vídeos semelhantes

[DesignComo configurar seu cabeçalho](/tutorials/design/como-configurar-seu-cabecalho/)

![Como configurar seu cabeçalho](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DesignComo configurar o estilo global do seu aplicativo](/tutorials/design/como-configurar-o-estilo-global-do-seu-aplicativo/)

![Como configurar o estilo global do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DesignComo personalizar a tela de lançamento do seu aplicativo](/tutorials/design/como-personalizar-a-tela-de-lancamento-do-seu-aplicativo/)

![Como personalizar a tela de lançamento do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DesignComo configurar o modo de navegação do seu aplicativo](/tutorials/design/como-configurar-o-modo-de-navegacao-do-seu-aplicativo/)

![Como configurar o modo de navegação do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DesignComo personalizar os ícones do seu menu](/tutorials/design/como-personalizar-os-icones-do-seu-menu/)

![Como personalizar os ícones do seu menu](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DesignComo criar o design das suas seções](/tutorials/design/como-criar-o-design-das-suas-secoes/)

![Como criar o design das suas seções](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DesignComo copiar o design de uma seção](/tutorials/design/como-copiar-o-design-de-uma-secao/)

![Como copiar o design de uma seção](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DesignComo configurar sua página inicial (home) do seu aplicativo movel](/tutorials/design/como-configurar-sua-pagina-inicial/)

![Como configurar sua página inicial (home) do seu aplicativo movel](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DesignComo escolher o tamanho do seu cabeçalho ?](/tutorials/design/como-escolher-o-tamanho-do-seu-cabecalho/)

![Como escolher o tamanho do seu cabeçalho ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)

[DesignComo modificar o fundo do seu app](/tutorials/design/como-modificar-o-fundo-do-seu-app/)

![Como modificar o fundo do seu app](https://portal.ww-cdn.com/portal_static/images/thumbnail_background.01a5a9e37ad2.jpg)