---
title: "Como personalizar os principais ícones da sua loja | App de Loja Online - Tutoriais - GoodBarber"
description: "Hoje vamos aprender como personalizar os ícones de seu aplicativo\r \r Esta é uma etapa obrigatória para gerar seu aplicativo\r \r O ícone é um elemento visual importan…"
canonical_url: "https://pt.goodbarber.com/tutorials/shop/design/como-personalizar-os-principais-icones-da-sua-loja/"
lang: pt
---

# Como personalizar os principais ícones da sua loja | App de Loja Online - Tutoriais - GoodBarber

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

# Como personalizar os principais ícones da sua loja

Hoje vamos aprender como personalizar os ícones de seu aplicativo

Esta é uma etapa obrigatória para gerar seu aplicativo

O ícone é um elemento visual importante 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 de seus usuários.

Para configurar os ícones, vamos ao menu Conteúdo e Design > Design > Design geral

Abra o menu Ícone

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

Começaremos pelo assistente

Aqui você pode adicionar texto ou um logotipo

Por exemplo, quero exibir as iniciais da minha loja Urban Shango. Tudo que eu preciso para inseri-los na caixa de texto
Voila

Se eu preferir um logotipo, basta clicar na aba assim e fazer o upload de uma imagem nas dimensões necessárias

Vamos nos limitar ao texto

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

Em seguida, crio o plano de fundo do meu ícone: uma cor ou uma imagem da biblioteca Unsplash do back office ou do meu computador.

É isso que vou fazer

E voila meu ícone está pronto!

Tudo que eu preciso 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 icones 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 fazer upload do ícone já criado (nos tamanhos necessários)

E está feito!

Agora você sabe personalizar o ícone do seu aplicativo

Vejo vocês em breve para outro tutorial!

## Vídeos semelhantes

[DesignComo configurar seu menu de navegação](/tutorials/shop/design/como-configurar-seu-menu-de-navegacao/)

![Como configurar seu menu de navegação](https://portal.ww-cdn.com/portal_static/images/videos_shop11.4f7dad94042e.jpg)

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

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

[DesignComo configurar a página inicial (Home) do seu aplicativo](/tutorials/shop/design/como-configurar-a-pagina-inicial-do-seu-aplicativo/)

![Como configurar a página inicial (Home) do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.jpg)

[DesignComo personalizar sua tela de lançamento](/tutorials/shop/design/como-personalizar-sua-tela-de-lancamento/)

![Como personalizar sua tela de lançamento](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[DesignComo configurar o cabeçalho da sua loja](/tutorials/shop/design/como-configurar-o-cabecalho-da-sua-loja/)

![Como configurar o cabeçalho da sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop15.1e15b7c0b749.jpg)

[DesignComo configurar o estilo global da sua loja](/tutorials/shop/design/como-configurar-o-estilo-global-da-sua-loja/)

![Como configurar o estilo global da sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DesignComo criar o design das seções de sua loja](/tutorials/shop/design/como-criar-o-design-das-secoes-de-sua-loja/)

![Como criar o design das seções de sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop18.471e5731e7e3.jpg)

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

![Como desengatar o design de uma seção](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DesignComo escolher o tamanho do seu cabeçalho](/tutorials/shop/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)