# Importar a marca do site: preencha o kit de marca num passo
[Canonical HTML page](https://gradiently.design/pt-br/guide/import-brand-from-website)
O seu site já sabe o seu nome, a sua apresentação em uma frase, a sua cor e o seu ícone. Um botão na página Marca lê tudo isso, e você decide o que manter.
## The short version
- O Gradiently consegue ler o site de uma marca e oferecer o nome, a descrição, a cor do tema e o ícone para o kit de marca.
- Nada é adicionado automaticamente: cada item encontrado aparece como uma sugestão que você pode usar ou ignorar.
- O nome vem das próprias tags de nome do site, a descrição da meta description, a cor da tag theme-color e o ícone do touch icon ou do favicon.
- Um site sem a tag theme-color ou só com um ícone SVG gera menos sugestões, então algumas linhas no head do HTML melhoram o resultado.
- Ler um site faz parte do kit de marca, que vem com o Gradiently Pro.
Para **importar a marca do site** no Gradiently, abra a página Marca, digite o seu endereço em **Site**, na seção Identidade, e escolha **Ler site**. O Gradiently busca o nome, a descrição, a cor do tema e o ícone do site e oferece cada um: usar o nome, usar a descrição como slogan ou em Sobre, adicionar a cor às cores da marca, adicionar o ícone como logo. Você escolhe o que entra. Leva alguns segundos e poupa a parte mais chata de montar um kit.
## Como importar a sua marca a partir de um site
1. **Abra a página Marca** Escolha a marca que você quer preencher. Cada marca da sua conta tem o próprio kit, então confira se está na certa.
2. **Digite o site** Em **Identidade**, digite o endereço em **Site**. Um domínio simples como `crumb.co` basta; não precisa do https.
3. **Escolha Ler site** O Gradiently visita a página uma vez, lê o head e busca o ícone. O botão mostra **Lendo…** enquanto trabalha.
4. **Use o que servir** Cada item encontrado aparece com o próprio botão: **Usar “Crumb” como nome**, **Usar a descrição como slogan**, **Usar a descrição em Sobre**, **Adicionar a cor**, **Adicionar o ícone como logo**. Ignore o que estiver errado.
5. **Leia de novo depois de mudanças** Se você atualizar o site, escolha **Ler de novo**. Quando tudo o que é útil já estiver no kit, a página avisa.
A cor do site também aparece depois como sugestão na seção **Cores**, identificada com o nome do seu site, então você pode adicioná-la por lá se tiver pulado da primeira vez.
## O que o Gradiently lê do seu site
Ele lê só a página inicial pública no endereço que você informa, e só as partes que descrevem a marca. Não percorre outras páginas, não faz login e não lê o seu conteúdo.
| Sugestão para o kit | De onde vem | Vira |
| --- | --- | --- |
| Nome | `og:site_name`, `application-name` ou o título de web app da Apple | Nome da marca |
| Descrição | `meta name="description"`, ou a descrição Open Graph | Slogan ou Sobre |
| Cor | `meta name="theme-color"` em hex ou rgb() | Uma cor da marca |
| Ícone | O maior `apple-touch-icon`, outros ícones raster e depois `/favicon.ico` | Um logo, de até 256 px |
Quatro sugestões e as suas fontes. O ícone é redesenhado como um PNG de no máximo 256 px antes de o Gradiently guardá-lo.
Vale saber dois detalhes. Ícones SVG são ignorados, porque o Gradiently não rasteriza o SVG de outra pessoa, então um site só com favicon SVG não gera ícone. E a cor precisa ser um valor hex ou rgb() simples; uma variável CSS na tag theme-color não pode ser lida.
## Deixe o seu site fácil de ler
Se o Ler site trouxer pouca coisa, a solução costuma ser algumas linhas no head do HTML do seu site. Elas ajudam mais do que o Gradiently: os navegadores usam theme-color na barra de endereço do celular, e as prévias de link usam as suas tags Open Graph. [Tags Open Graph](https://gradiently.design/pt-br/guide/open-graph-tags) e [design de favicon](https://gradiently.design/pt-br/guide/favicon-design) vão mais fundo.
```html
Crumb · Sourdough bakery in Leeds
```
Tudo o que o Ler site procura: um nome de site, uma descrição de uma linha, uma cor de tema em hex e um touch icon raster de 180×180.
### Rende pouco
- Sem meta description, ou uma recheada de palavras-chave
- Sem tag theme-color, ou com uma variável CSS nela
- Só um favicon SVG
- Uma página inicial que redireciona para uma tela de login
### Rende um kit bem encaminhado
- Uma frase honesta sobre o que você faz
- Uma cor de tema em hex que combine com o seu logo
- Um touch icon PNG de 180×180
- Uma página inicial pública que carrega rápido
## O que fazer depois da importação
A importação dá uma base, não um kit pronto. Vale fazer quatro coisas em seguida, nesta ordem.
1. **Envie os arquivos de logo de verdade.** Um favicon é minúsculo e quadrado. Adicione o seu logo completo em PNG, JPEG, WebP, GIF ou AVIF, um para fundos escuros e outro para fundos claros; veja [logo sobre fundo com gradiente](https://gradiently.design/pt-br/guide/logo-on-gradient-background).
2. **Complete as cores.** Uma cor de tema é um começo. Acrescente uma cor de apoio e os seus neutros mais escuro e mais claro; [como escolher as cores da marca](https://gradiently.design/pt-br/guide/how-to-choose-brand-colors) ajuda.
3. **Defina as fontes.** Escolha uma fonte para títulos e outra para o texto, ou [envie os seus próprios arquivos de fonte](https://gradiently.design/pt-br/guide/custom-fonts-upload).
4. **Escreva a voz.** A descrição do site diz ao Designer o que você é, não como você soa. Preencha Tom, Com suas palavras, Sempre e Nunca; [voz da marca para IA](https://gradiently.design/pt-br/guide/brand-kit-voice) mostra como.
Um post do Instagram apresentando a Crumb, uma padaria de fermentação natural, com o nome e a descrição lidos do site dela
Um primeiro post logo depois da importação: nome e descrição vindos do site.
A mesma apresentação da Crumb como um Story vertical do Instagram
A mesma marca como story em 1080×1920, pronta assim que o kit estiver configurado.
## Quando a leitura do site falha
Se você vir **Não conseguimos ler esse site.**, a página não respondeu a tempo, devolveu um erro ou bloqueou a solicitação. Confira se o endereço abre numa janela anônima do navegador. Endereços que apontam para uma rede privada, uma página de login ou um arquivo em vez de uma página web são recusados de propósito. Um site atrás de uma barreira rígida contra robôs talvez nunca possa ser lido; digite os dados à mão, o que leva uns dois minutos.
> **Quem pode fazer isso** Ler um site faz parte do kit de marca, que vem com o Pro. Num workspace compartilhado, só proprietários e admins podem alterar um kit de marca. O Gradiently lê o site uma vez, quando você pede, sem cookies nem credenciais.
Com o kit preenchido, o Studio coloca as suas cores em primeiro lugar em todo seletor, oferece os seus logos e começa os designs nas suas fontes, e o Designer escreve a partir da sua descrição. Junte isso a um Mark que ninguém mais pode usar e os seus posts têm a sua cara desde o primeiro. O resto do kit está em [como configurar o kit de marca](https://gradiently.design/pt-br/guide/brand-kit-setup).
## FAQ
### Como pego as cores da minha marca a partir do meu site?
No Gradiently, digite o seu site na página Marca e escolha Ler site. Se o site tiver uma tag theme-color, a cor dela é oferecida como cor da marca.
### Por que o Ler site não encontrou o meu logo?
Ele procura ícones raster, como um apple-touch-icon ou o favicon.ico, e ignora ícones SVG. Adicione um touch icon PNG ao seu site ou envie o seu logo diretamente.
### Importar substitui o meu kit de marca?
Não. Cada item encontrado é oferecido como sugestão, e nada muda no kit até você escolher usá-lo.
### Posso importar a marca do site de outra pessoa?
A ferramenta lê qualquer site público, mas use-a para marcas que você administra ou para as quais trabalha. O kit deve guardar materiais que você tem o direito de usar.
### E se o meu site não tiver descrição?
O Ler site ainda oferece o que encontrar. Escreva o slogan e o Sobre à mão e pense em acrescentar uma meta description ao site, o que também ajuda nos resultados de busca.