UX de favicon: o que faz um favicon ser ótimo

Um ótimo favicon é uma marca simples e de alto contraste, geralmente o seu logotipo-símbolo ou uma ou duas letras, que continua legível em 16x16 pixels tanto em abas de navegador claras quanto escuras, combina com a sua marca e raramente muda. Tudo o mais neste guia (alinhamento de pixels, cor, margem, transparência, tamanho de arquivo) serve a esses objetivos: fazer com que o seu site seja encontrado instantaneamente entre dezenas de abas abertas.

Um favicon é minúsculo, mas aparece em muitos lugares: abas do navegador, barras de favoritos, listas de histórico, o menu de busca de abas, resultados de busca do Google no celular e no computador, e telas inicias de smartphones. Para quem mantém muitas abas abertas, o título costuma ser cortado até sumir e o ícone é a única pista que resta. Isso faz dele um verdadeiro elemento de navegação, e não mera decoração.

1. Legibilidade em 16x16

O tamanho clássico de favicon é 16x16 pixels CSS. Em uma tela padrão, isso são literalmente 256 pixels; em uma tela retina 2x, o navegador normalmente escolhe uma imagem de 32x32 para o mesmo espaço. Seja qual for o seu design, ele precisa sobreviver a essa redução.

Mantenha simples

• Uma forma ou uma a duas letras. Uma única letra em negrito, um círculo com um símbolo ou uma marca geométrica simples funcionam. Três letras ou uma palavra viram ruído.
• Um único ponto focal. Se você não consegue descrever o ícone em cinco palavras, ele é complicado demais.
• Sem degradês, sombras ou texturas finas. Em tamanhos pequenos, eles se tornam borrões.

Alinhe à grade de pixels

Em 16x16, uma linha posicionada meio pixel fora da grade sofre antisserrilhamento em duas linhas de pixels e fica cinza e sem nitidez. Posicione as bordas em limites de pixels inteiros e use larguras pares quando a forma for simétrica. Se você exporta de uma ferramenta vetorial, ative o ajuste a pixels (pixel snapping) ou confira o resultado reduzido e corrija à mão.

Evite linhas finas

Traços com menos de 2 pixels em 16x16 (cerca de 12% da largura do ícone) tendem a desaparecer ou a oscilar entre tamanhos. Engrosse os traços, remova detalhes internos e feche pequenos vãos. Um glifo ousado e ligeiramente pesado costuma ser mais legível do que uma miniatura fiel de um logotipo detalhado.

Faça o ajuste fino à mão

Arquivos ICO e PNG não têm hinting de fonte, então a edição manual de pixels é o equivalente: você ajusta pixels individuais para que curvas, diagonais e contraformas (os buracos em letras como "a" ou "e") fiquem nítidas. A redução automática é um bom primeiro rascunho, mas alguns pixels posicionados à mão costumam fazer a diferença entre uma mancha e uma letra reconhecível. O editor de pixels do MakeFav foi feito para isso: abra a tela de 16x16, corrija os pixels problemáticos e exporte.

2. Contraste em abas claras e escuras

Hoje os navegadores costumam rodar em modo escuro, e muitos usuários têm barras de abas diferentes do tema da página. Um ícone azul-marinho escuro com fundo transparente pode ficar perfeito em uma aba branca e quase invisível em uma aba cinza-escura. Sempre teste os dois casos.

Soluções práticas

• Adicione uma forma de fundo. Um quadrado arredondado ou círculo sólido em uma cor da marca garante que o símbolo tenha contraste próprio, independentemente da aba.
• Use um contorno fino ou um halo. Uma borda mais clara de 1 px ao redor de um glifo escuro (ou o inverso) mantém a silhueta visível em qualquer tema, mas em 16x16 ela precisa continuar nítida, então teste.
• Escolha cores de marca de tom médio. Cores como azul forte, laranja, verde ou magenta costumam funcionar tanto em superfícies brancas quanto quase pretas. Amarelo muito claro ou azul-marinho muito escuro são os mais arriscados.
• Use um favicon SVG adaptável. Um SVG pode incluir uma media query prefers-color-scheme para que o ícone mude com o tema do sistema.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Observe que a media query reflete o tema do sistema operacional ou do navegador, que normalmente é o que a barra de abas segue, mas nem sempre. O suporte a favicons SVG também varia: Chrome e Firefox os aceitam, enquanto o Safari historicamente ficou para trás, então mantenha sempre alternativas em PNG ou ICO. Um design com fundo sólido é a opção mais robusta, pois não precisa de nenhuma lógica de tema.

3. Reconhecimento e consistência de marca

Use o logotipo-símbolo (o símbolo ou monograma), e não o logotipo completo com o texto da marca. Texto dentro de um ícone de 16x16 é ilegível, e um logotipo horizontal largo reduzido a um quadrado deixa só uma tira minúscula no meio.

• Se a sua marca tem um símbolo, simplifique-o para tamanhos pequenos em vez de apenas reduzi-lo. Uma "versão favicon" com menos detalhes é prática padrão.
• Se a sua marca é apenas um logotipo tipográfico, use a primeira letra ou um par de letras distintivo e componha-o na tipografia da marca em peso forte.
• Mantenha as cores coerentes com o seu logotipo, o ícone do app e os avatares nas redes sociais, para que o usuário reconheça a mesma marca em todo lugar.
• Distintividade importa tanto quanto fidelidade. Olhe para uma fileira de abas: se outros três sites também usam um círculo azul, o seu não vai se destacar. Uma forma ou cor diferente é mais útil do que uma redução perfeitamente fiel.

4. Cor: uma paleta limitada e saturada

Com tão poucos pixels, cada cor extra adiciona poluição. Mire em uma ou duas cores mais, no máximo, branco ou preto. Cores saturadas se destacam melhor em tamanhos pequenos do que tons pastel, que tendem a se misturar ao fundo da aba.

Tome emprestado um pouco do pensamento de acessibilidade. A WCAG pede pelo menos 3:1 de contraste para objetos gráficos significativos (critério de sucesso 1.4.11, Contraste de elementos não textuais). Um favicon não é formalmente coberto, já que faz parte da interface do navegador e não do conteúdo da página, mas 3:1 entre o glifo e o fundo, e entre o ícone e a aba, é uma meta sensata. Evite também comunicar qualquer coisa apenas pelo matiz: variantes vermelha e verde do mesmo ícone são indistinguíveis para muitos usuários daltônicos, então varie a forma ou adicione um símbolo.

5. Forma, margem e zonas seguras

Preencha o quadrado

As abas do navegador exibem o favicon em um tamanho pequeno fixo, então margem extra só faz o seu símbolo ficar menor. Para ícones de aba padrão, use a maior parte da tela, com apenas um ou dois pixels de folga, para que o símbolo fique o maior possível.

Arredondado ou quadrado?

Os navegadores em geral não recortam favicons de abas, então a forma que você desenha é a forma que o usuário vê. Um quadrado com cantos levemente arredondados fica organizado e oferece um fundo consistente; um glifo livre ou círculo sobre transparência pode parecer mais leve e distintivo. Ambos funcionam. Escolha um e mantenha todo o seu conjunto de ícones consistente.

Apple touch icons

O iOS adiciona seus próprios cantos arredondados ao apple-touch-icon (180x180 é o tamanho usual). Forneça um quadrado de sangria total, sem cantos pré-arredondados; caso contrário, podem aparecer pontas escuras ou brancas visíveis nos cantos.

Ícones maskable para Android e PWAs

Ícones maskable são recortados pelo sistema operacional em círculos, squircles ou outras formas. Mantenha todo o conteúdo importante dentro da zona segura: um círculo centralizado no ícone com raio de 40% da largura do ícone. Estenda a cor de fundo até as bordas para que qualquer máscara fique correta. Não reutilize como ícone maskable um favicon de aba justo, de ponta a ponta, porque a máscara vai cortá-lo.

6. Transparência

A transparência funciona bem em favicons de aba, e é ela que permite que um ícone só com glifo fique limpo em qualquer cor de aba. Mas é um problema para Apple touch icons: o iOS preenche áreas transparentes com uma cor sólida (normalmente preto), o que pode arruinar o design. Dê sempre ao apple-touch-icon um fundo opaco na cor da marca. O mesmo vale para ícones maskable e para a maioria dos usos na tela inicial do Android, em que um fundo opaco oferece resultados previsíveis.

7. Estabilidade: não mude com muita frequência

Um favicon constrói reconhecimento pela repetição. Mudá-lo com frequência obriga os usuários a reaprender qual aba é a sua, e também causa dores de cabeça técnicas. Os navegadores armazenam favicons em cache de forma agressiva, e o Google os busca e guarda separadamente das suas páginas, então um novo ícone pode levar dias ou semanas para aparecer nos resultados de busca. O Google também pede uma URL de favicon estável, um ícone cujo tamanho seja múltiplo de 48 pixels (48x48, 96x96 e assim por diante) e um arquivo que possa ser rastreado (não bloqueado pelo robots.txt). Trate a mudança de favicon como uma decisão do nível de um rebranding, e não como uma decoração sazonal.

8. Estados de notificação e favicons dinâmicos

Alguns apps web alteram o favicon para indicar mensagens não lidas, status de gravação ou um erro. Bem feito, ajuda; em excesso, irrita.

• Use um pequeno selo (um ponto ou uma contagem curta) em um canto, e não um redesenho completo. O ícone base deve continuar reconhecível.
• Seja econômico. Reserve os selos para eventos que exijam ação do usuário. Não anime o ícone continuamente.
• Limite os números. Em 16x16, só um ou dois dígitos são legíveis; mostre "9+" ou um ponto simples em vez de "137".
• Redefina rapidamente quando o usuário tiver resolvido o item e restaure o ícone padrão.
• Não dependa apenas da cor. Um ponto vermelho deve ser reforçado também pelo título da página, como "(3) Caixa de entrada", para que a informação esteja disponível a todos.

Favicons dinâmicos geralmente são desenhados em um canvas e trocados atualizando o href do elemento link do ícone. Limite a frequência das atualizações, pois trocar o favicon constantemente pode consumir CPU e distrair os usuários.

9. Desempenho

Favicons são pequenos, mas ainda são requisições que podem ser mal feitas.

• Mantenha os arquivos pequenos. Um favicon PNG costuma ter de algumas centenas de bytes a alguns kilobytes. Um SVG simples pode ter menos de 1 KB.
• Evite arquivos ICO inchados. Um ICO com vários tamanhos, com imagens de 16, 32 e 48 pixels, é suficiente. Incorporar uma imagem de 256x256 multiplica o tamanho do arquivo sem benefício visível nas abas do navegador.
• Defina cabeçalhos de cache. Sirva os ícones com um tempo de vida longo em Cache-Control, por exemplo public, max-age=31536000, immutable, e use um nome de arquivo versionado ou com hash quando for alterá-los.
• Declare os ícones explicitamente. Os navegadores solicitam /favicon.ico por padrão, então forneça um mesmo que você declare outros ícones, para evitar ruído de 404 nos seus logs.
• Comprima. Passe os PNGs por um otimizador sem perdas e minifique os SVGs.

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

Se você quer gerar todos esses arquivos a partir de uma única imagem de origem, o gerador de favicon do MakeFav produz o conjunto padrão, e a página para desenvolvedores apresenta as opções de integração.

10. Acessibilidade

Um favicon não tem texto alternativo e os leitores de tela não o anunciam, então as ferramentas tradicionais de acessibilidade, como atributos alt, não se aplicam. O que importa:

• O título da página carrega o significado. Escreva elementos <title> únicos e descritivos. Nunca dependa do ícone para transmitir estado; espelhe qualquer selo no título.
• Visibilidade para usuários com baixa visão. Alto contraste, uma forma marcante e um símbolo grande ajudam quem percorre as abas visualmente.
• Independência de cor. Garanta que formas ou letras distingam os estados, e não apenas o matiz.
• Menos distração. Evite favicons piscantes ou animados, que podem ser um problema para usuários sensíveis a movimento.

Checklist de UX de favicon

Checklist de testes

Não confie na pré-visualização grande da sua ferramenta de design. Teste o ícone real em condições reais:

1. Vários navegadores. Verifique Chrome, Firefox, Safari e Edge, pois cada um escolhe ícones e tamanhos de forma ligeiramente diferente.
2. Modo claro e escuro. Alterne o tema do SO e do navegador e olhe a barra de abas a cada vez.
3. Telas retina e padrão. Verifique em um monitor 1x e em uma tela 2x ou 3x, e dê zoom no navegador.
4. Barra de favoritos. Adicione a página aos favoritos e veja se o ícone continua legível ao lado de outros sites.
5. Muitas abas. Abra 20 abas e veja se você encontra a sua num piscar de olhos.
6. Prévia na SERP do Google. Confira um resultado de busca no celular depois que o ícone for rastreado novamente. Lembre-se de que a atualização pode demorar.
7. Tela inicial. Adicione o site às telas iniciais do iOS e do Android e confirme que o ícone não está cortado, não tem cantos pretos e não fica pequeno demais dentro da máscara.
8. Verificação técnica. Passe o seu domínio pelo verificador de favicon do MakeFav para confirmar que os arquivos existem, retornam status 200, têm os tamanhos certos e estão declarados corretamente no seu HTML.

Um fluxo de trabalho prático

1. Comece pelo seu logotipo-símbolo e simplifique-o até uma forma ou letra.
2. Crie uma tela quadrada com um fundo sólido ou com forma que funcione nos dois temas.
3. Exporte os tamanhos 32x32 e 16x16 e refine a versão pequena à mão no editor de pixels.
4. Gere o conjunto completo (ICO, PNG, apple-touch-icon, ícones do manifest) com o gerador.
5. Adicione as tags link, defina os cabeçalhos de cache, publique e verifique com o verificador.

Um favicon é um dos menores recursos do seu site e um dos mais vistos. Algumas decisões cuidadosas sobre contraste, simplicidade e consistência fazem com que ele funcione em qualquer aba, tema e dispositivo.

Perguntas frequentes

Qual deve ser o tamanho de um favicon?

Projete em 16x16 e 32x32 para abas do navegador (o navegador usa 32x32 em telas de alta densidade), forneça um apple-touch-icon de 180x180 para iOS e PNGs de 192x192 e 512x512 para Android e PWAs. Para os resultados de busca do Google, use um ícone quadrado cujo tamanho seja múltiplo de 48 pixels, como 48x48 ou 96x96. Uma origem em SVG escala para todos eles.

Devo usar meu logotipo completo como favicon?

Normalmente não. Logotipos completos com texto são detalhados e largos demais para um ícone quadrado de 16x16. Use o logotipo-símbolo ou um monograma de uma ou duas letras e simplifique-o para que continue reconhecível em tamanho minúsculo.

Como fazer um favicon funcionar no modo escuro?

A abordagem mais segura é dar ao ícone uma forma de fundo sólida própria ou um contorno contrastante, para que ele não dependa da cor da aba. Como alternativa, use um favicon SVG com uma media query prefers-color-scheme para trocar as cores e mantenha alternativas em PNG ou ICO para navegadores que não aceitam ícones SVG. Teste sempre nos temas claro e escuro.

Por que meu novo favicon não aparece?

Os navegadores mantêm favicons em cache por muito tempo, e o Google guarda a sua própria cópia, que atualiza em seu próprio ritmo, muitas vezes levando dias ou semanas. Faça um recarregamento forçado da página, limpe o cache do navegador, use um novo nome de arquivo versionado e verifique se as tags link e um /favicon.ico na raiz apontam para o arquivo certo. Você pode conferir a configuração com o verificador do MakeFav.

É uma boa ideia mostrar selos de notificação em um favicon?

Sim, se usados com moderação. Um pequeno ponto ou uma contagem de um ou dois dígitos ajuda os usuários a perceber algo que exige ação, mas animação constante ou números grandes prejudicam a legibilidade e a atenção. Espelhe sempre o estado no título da página, restaure o ícone padrão quando o item for resolvido e não dependa apenas da cor.