Você já tem um logotipo. O que você precisa é desse logotipo transformado na pilha de arquivos de ícone minúsculos que um navegador espera — um favicon.ico, um punhado de PNGs em tamanhos específicos, um web manifest e o HTML para conectar tudo. Essa conversão é mecânica, e você pode fazê-la em cerca de um minuto sem instalar nada.
O detalhe é que nem todo logotipo encolhe graciosamente. Então isto cobre tanto o caminho rápido quanto como corrigir um logotipo que vira purê a 16 pixels.
A versão curta
- Tenha seu logotipo como uma imagem quadrada — idealmente 512×512 ou maior, sobre um fundo transparente ou sólido.
- Solte-o no Gerador de Favicon.
- Baixe o conjunto gerado e coloque os arquivos na raiz do seu site.
- Cole o trecho de HTML fornecido no seu
<head>.
É esse o trabalho inteiro. O gerador produz o favicon.ico, PNGs em 16, 32, 48, 180, 192 e 512, um webmanifest e as tags <link> exatas — então você não fica recortando seis imagens à mão nem chutando a sintaxe do manifest.
Prepare seu logotipo primeiro — é aqui que a qualidade é ganha ou perdida
Um favicon vive a 16×16 na aba do navegador. Qualquer detalhe que não sobreviva a esse tamanho é desperdiçado. Gaste dois minutos aqui e o resultado fica nítido em todo lugar.
Deixe-o quadrado. Favicons são quadrados. Um logotipo largo e horizontal vai ganhar barras ou ser espremido. Recorte até o elemento mais reconhecível — geralmente a marca ou uma única inicial — e centralize-o num quadro quadrado.
Descarte o logotipo com nome. O nome completo da sua empresa não será legível no tamanho da aba. "Acme Corporation" vira um borrão cinza. Mantenha o símbolo, ou uma única letra, e deixe o título da aba carregar o nome.
Confira o contraste nos dois temas. As abas do navegador vêm em claro e escuro. Um ícone azul-marinho some numa aba escura; um ícone pálido some numa clara. Se a sua marca é de uma cor chapada, garanta que essa cor se leia nos dois. Um contorno sutil ou um pequeno fundo sólido pode ajudar.
Deixe espaço para respirar. Adicione um pouco de espaçamento dentro do quadrado para o ícone não ficar espremido contra as bordas. Ele vai parecer mais equilibrado em todo espaço.
Comece grande. Uma origem de 512×512 (ou maior) dá ao gerador um detalhe limpo do qual reduzir. Ampliar um logotipo minúsculo antes só grava o borrão.
Fundo transparente ou sólido?
Ambos funcionam — depende do visual que você quer.
- Transparente deixa o fundo da aba ou da tela inicial transparecer. Limpo e moderno, e se adapta a ambientes claros/escuros. Melhor quando sua marca é uma forma distinta.
- Fundo sólido (um quadrado arredondado colorido atrás da marca) garante que o ícone se leia não importa o que esteja atrás. É o que a maioria dos ícones de app faz, e é a escolha mais segura se o seu logotipo é fino ou de baixo contraste.
Na dúvida, um fundo sólido na cor da sua marca é a opção robusta — ele nunca some num fundo combinando.
Depois de baixar: para onde vão os arquivos
O gerador te entrega um conjunto de arquivos e um trecho. Duas regras de posicionamento cobrem tudo:
- O
favicon.icovai na raiz do seu site (/favicon.ico). Navegadores e o Windows o procuram ali pelo nome mesmo sem uma tag<link>. - Todo o resto pode ficar onde você quiser, desde que os caminhos no trecho de HTML combinem. A maioria das pessoas coloca tudo na raiz e cola o trecho como está.
Aí é só o trecho do <head> — os links de ícone, o apple-touch-icon e a referência ao manifest. Cole, publique, atualize forçando (hard-refresh), e você deve ver seu logotipo na aba.
Por que fazer no navegador?
Porque seu logotipo nunca sai da sua máquina. O processo inteiro — ler a imagem, redimensionar para cada dimensão, empacotar o .ico, escrever o manifest — acontece localmente no seu navegador usando Canvas. Nada é enviado a um servidor, não há cadastro nem marca d'água e, depois da primeira visita, a ferramenta funciona offline. Para um recurso de marca que você talvez ainda não tenha publicado, mantê-lo fora de servidores de terceiros é o padrão sensato.
Uma vez que seu logotipo esteja quadrado, com alto contraste e legível em tamanho pequeno, gerar o conjunto completo é a parte fácil.