Como criei logo e favicon sem verba nem designer

Um dos primeiros obstáculos que travei depois de decidir montar esse blog foi um clássico de quem não tem verba pra contratar um designer: eu precisava de uma logo e um favicon, e não tinha nenhum dos dois prontos. A MacbTools já existia como empresa, mas nunca tinha passado por esse processo de criar uma identidade visual pensada especificamente pra presença digital.

Achei que isso ia virar um projeto à parte, de dias. Não foi bem assim — mas também não foi tão simples quanto "gerar e pronto".

O que eu não sabia sobre logo x favicon

Antes de começar, eu tratava "logo" e "favicon" como praticamente a mesma coisa — só tamanhos diferentes da mesma imagem. Não é bem assim. A logo do cabeçalho do blog tem espaço pra composição: ícone, nome da marca, até uma tagline. O favicon, que aparece na aba do navegador, precisa funcionar em um espaço minúsculo — geralmente 16x16 pixels. Um design que fica ótimo na logo pode virar uma mancha ilegível no favicon se não for simplificado.

Isso mudou minha abordagem: em vez de tentar usar a mesma imagem nos dois lugares, criei duas versões — a logo completa, com o nome por extenso, e uma versão só do ícone, mais simples, pensada especificamente pra ficar legível pequena.

O processo que segui

Como não tenho experiência com design, defini a identidade em camadas simples:

1. Cor. Escolhi um azul como cor principal — transmite confiança e tecnologia, e é uma escolha segura pra quem está começando sem muito repertório visual.

2. Ícone. Em vez de tentar algo complexo, optei por uma forma geométrica simples que remete ao "M" de MacbTools, dentro de um quadrado com cantos arredondados — funciona tanto na logo quanto no favicon.

3. Tipografia. Usei uma fonte sem serifa, direta, sem frescura — o objetivo era legibilidade, não sofisticação.

O erro que cometi na primeira tentativa

Minha primeira logo saiu grande demais e, quando subi pro cabeçalho do blog, ficou desproporcional — ocupando espaço demais e cortando mal em telas menores. Achei que o problema era o arquivo, mas na verdade era o tamanho da imagem original que eu tinha exportado.

A solução veio em duas frentes: gerei uma versão redimensionada da imagem em um tamanho mais adequado pra cabeçalho (algo entre 300x80 e 400x110 pixels), e também usei uma regra de CSS simples no tema do blog pra garantir que a imagem nunca ultrapassasse uma largura máxima, não importa o tamanho do arquivo original. Foi um lembrete de que, em automação e configuração técnica, geralmente tem mais de uma camada resolvendo o mesmo problema — e vale a pena conhecer as duas.

Sobre o favicon: a surpresa boa

Esperava precisar converter a imagem pra um formato específico de ícone antes de conseguir usar — mas descobri que o Blogger aceita o favicon direto em formato vetorial, sem precisar de conversão. Foi um dos poucos momentos em que a configuração técnica foi mais simples do que eu esperava.

Próximo passo

Com a identidade visual resolvida — mesmo que simples —, o próximo ponto que quero destrinchar aqui é uma dúvida que provavelmente quem também tem uma empresa formal vai se identificar: como decidi separar a razão social da marca que aparece publicamente, e por que essa separação importa mais do que parece quando você começa a preencher formulários de aplicativo pras redes sociais.

Se você já passou pelo processo de criar identidade visual sem contratar um designer, conta nos comentários: qual parte foi mais difícil pra você — escolher as cores, o ícone, ou simplesmente decidir por onde começar?