Criar logotipo: símbolo, texto e ícones

Porque é exatamente ali que um logotipo falha. Na tela ele é montado grande, mas trabalha pequeno: 16 pixels numa aba, um ícone no celular, o círculo do avatar, uma impressão numa caixa. Um símbolo de traços finos com um slogan de cinco palavras vira uma mancha cinza nesses tamanhos, e é melhor descobrir isso agora do que depois da tiragem. Na mesma fila estão a versão em uma tinta e a simulação de daltonismo: o contraste pode estar decente e mesmo assim vermelho sobre verde se funde para um homem em cada doze.

Sim, e essa é a resposta para «eu já tenho um símbolo». Um arquivo SVG é decomposto em curvas e vira um símbolo igual aos nossos: se for de uma cor só, muda de cor junto com o logotipo; se for colorido, mantém as próprias cores. Uma imagem comum — PNG, JPG, WebP, um escaneado feito à mão — é seguida pelo contorno e virada em vetor: a partir daí escala sem perdas, assume a cor da paleta e vai para o SVG em curvas, não em pontos. O detalhe se ajusta num controle deslizante e, se o desenho for claro sobre fundo escuro, o botão «Inverter» ajuda. Quando a vetorização não funciona — numa foto, por exemplo — a imagem entra como está e isso é dito de forma explícita embaixo da prévia: caso contrário a promessa de «vetor de verdade» seria mentira.

Ele é realmente vetorial e autossuficiente. Uma troca comum é um PNG embrulhado num arquivo SVG: abre, mas borra ao ampliar. A segunda é o texto como tag text: no seu computador parece certo, e na gráfica ou no designer entra uma fonte do sistema e o logotipo muda de formas em silêncio. Aqui as letras estão convertidas em curvas, então o arquivo não depende de nada e é editável em qualquer programa vetorial. Vale saber também que em vários geradores conhecidos não há vetor nenhum: o Adobe Express não exporta SVG em plano algum, e o Squarespace e o gerador da Shopify entregam apenas PNG.

São quatro maneiras diferentes de falhar, cada uma medida pelo próprio número. «Contraste» é a razão de luminâncias entre símbolo e fundo pela fórmula WCAG: quanto maior, com mais segurança o logotipo se vê; abaixo de três a indicação acende como aviso, porque um símbolo cinza-claro no branco fica bonito no layout e some no cartão de visita. «Daltonismo» é o mesmo contraste calculado depois de simular a alteração de visão de cores mais comum: vermelho sobre verde pode dar um primeiro número aceitável e se fundir no segundo. «No escuro» mede o símbolo contra uma interface escura — é ali que um texto quase preto desaparece. «A 16 px» avisa que um slogan não se lê nesse tamanho: o lugar dele é a versão grande, não o favicon.

Favicon de 16, 32 e 48 pixels para a aba do navegador, um favicon.ico montado a partir deles para navegadores antigos e atalhos do Windows, apple-touch-icon 180 para a tela do iPhone, ícones 192 e 512 para o manifesto, um ícone mascarável de 512 com margem (no Android o sistema recorta sozinho na forma dos ícones), favicon.svg, um site.webmanifest pronto e um arquivo head.html com as linhas de ligação. Os arquivos vão na raiz do site e as linhas do head.html, na seção head da página. A transparência é retirada de propósito do apple-touch-icon e do ícone mascarável: o iOS coloca um ícone transparente sobre preto e os cantos saem pretos.

Os símbolos foram desenhados para esta ferramenta, não tirados de uma biblioteca pública de ícones. A diferença não é só a semelhança. O gerador do Squarespace tira os símbolos de uma biblioteca de terceiros, e a ajuda dele mesmo diz que antes de publicar o logotipo é preciso ler a licença daquele ícone; parte dos elementos embutidos do Adobe Express vem com uma licença que proíbe expressamente exportá-los como arquivo independente — e um logotipo é exatamente um arquivo independente. Com os nossos símbolos esse parágrafo não existe. As formas aqui são propositalmente simples e geométricas: são essas que se leem a 16 pixels, o que nenhum ícone detalhado consegue. Se quiser algo ainda mais seu — envie um desenho ou use um monograma com as iniciais.

Dá. Se a fonte decorativa escolhida não tiver esses caracteres — a Bebas Neue, por exemplo, não tem cirílico nem hangul —, o texto é composto numa fonte que os tenha, e embaixo da prévia fica dito qual. Trocar a fonte em silêncio seria pior: você estaria vendo um logotipo que não é o seu sem saber. O árabe é composto com a direção correta e a ligação certa das letras.