UX do favicon: o que faz um ótimo favicon

Um ótimo favicon é uma marca simples e de alto contraste, normalmente o símbolo da sua marca ou uma ou duas letras, que se mantém legível a 16x16 píxeis em separadores de navegador claros e escuros, está alinhada com a sua marca e raramente muda. Tudo o resto neste guia (alinhamento de píxeis, cor, margens, transparência, tamanho do ficheiro) serve estes objetivos: tornar o seu site instantaneamente reconhecível entre dezenas de separadores abertos.

Um favicon é minúsculo, mas aparece em muitos locais: separadores do navegador, barras de marcadores, listas de histórico, o menu de pesquisa de separadores, resultados de pesquisa do Google no telemóvel e no computador, e ecrãs iniciais de telemóveis. Para quem tem muitos separadores abertos, o título é muitas vezes cortado até desaparecer e o ícone é a única pista que resta. Isso faz dele um verdadeiro elemento de navegação, e não uma decoração.

1. Legibilidade a 16x16

O tamanho clássico de um favicon é 16x16 píxeis CSS. Num ecrã normal, isso são literalmente 256 píxeis; num ecrã retina 2x, o navegador costuma escolher uma imagem de 32x32 para o mesmo espaço. Tudo o que desenhar tem de sobreviver a esta redução.

Mantenha a simplicidade

• 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 transformam-se em ruído.
• Um único ponto focal. Se não conseguir descrever o ícone em cinco palavras, é demasiado complicado.
• Sem gradientes, sombras ou texturas finas. Em tamanhos pequenos tornam-se borrões.

Alinhe com a grelha de píxeis

A 16x16, uma linha posicionada meio píxel fora da grelha fica com anti-aliasing em duas linhas de píxeis e parece cinzenta e esbatida. Coloque as arestas em limites de píxeis inteiros e use larguras pares quando a forma for simétrica. Se exportar a partir de uma ferramenta vetorial, ative o alinhamento a píxeis (pixel snapping) ou verifique o resultado reduzido e corrija-o à mão.

Evite linhas finas

Traços com menos de 2 píxeis a 16x16 (cerca de 12 por cento da largura do ícone) tendem a desaparecer ou a cintilar entre tamanhos. Engrosse os traços, remova detalhes interiores e una pequenos intervalos. Um glifo em negrito, ligeiramente pesado, costuma ler-se melhor do que uma miniatura fiel de um logótipo detalhado.

Ajuste à mão

Os ficheiros ICO e PNG não têm hinting como as fontes, por isso a edição manual de píxeis é o equivalente: ajusta píxeis individuais para que curvas, diagonais e contraformas (os buracos em letras como "a" ou "e") se mantenham nítidas. A redução automática é um bom primeiro rascunho, mas alguns píxeis colocados à mão fazem muitas vezes a diferença entre uma mancha e uma letra reconhecível. O editor de píxeis do MakeFav foi criado para isto: abra a tela de 16x16, corrija os píxeis problemáticos e exporte.

2. Contraste em separadores claros e escuros

Hoje em dia, os navegadores funcionam frequentemente em modo escuro, e muitos utilizadores têm barras de separadores diferentes do tema da página. Um ícone azul-marinho escuro com fundo transparente pode ser perfeito num separador branco e quase invisível num separador cinzento-escuro. Teste sempre ambos.

Soluções práticas

• Adicione uma forma de fundo. Um quadrado arredondado ou um círculo sólido na cor da marca garante que o símbolo tem o seu próprio contraste, independentemente do separador.
• Use um contorno fino ou um halo. Uma borda mais clara de 1 px à volta de um glifo escuro (ou o inverso) mantém a silhueta visível em qualquer tema, mas a 16x16 tem de ficar nítida, por isso teste-a.
• Escolha cores de marca de tom médio. Cores como azul forte, laranja, verde ou magenta costumam funcionar tanto em superfícies brancas como quase pretas. O amarelo muito claro ou o azul-marinho muito escuro são os mais arriscados.
• Use um favicon SVG adaptativo. 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>

Note que a media query reflete o tema do sistema operativo ou do navegador, que é normalmente o que a barra de separadores segue, mas nem sempre. O suporte para favicons SVG também varia: o Chrome e o Firefox suportam-nos, enquanto o Safari tem historicamente ficado atrás, por isso mantenha sempre alternativas em PNG ou ICO. Um design com fundo sólido é a opção mais robusta, porque não precisa de qualquer lógica de tema.

3. Reconhecimento e coerência da marca

Use o símbolo da marca (o símbolo ou monograma), e não o logótipo completo com o nome em texto. O texto dentro de um ícone de 16x16 é ilegível, e um logótipo horizontal largo reduzido a um quadrado deixa-o com uma faixa minúscula ao meio.

• Se a sua marca tem um símbolo, simplifique-o para tamanhos pequenos em vez de apenas o reduzir. Uma "versão favicon" com menos detalhes é prática corrente.
• Se a sua marca é apenas um logótipo tipográfico, escolha a primeira letra ou um par de letras distintivo e componha-o na tipografia da marca com um peso forte.
• Mantenha as cores coerentes com o seu logótipo, o ícone da app e os avatares das redes sociais, para que o utilizador reconheça a mesma marca em todo o lado.

A distinção importa tanto como a fidelidade. Olhe para uma fila de separadores: se outros três sites também usam um círculo azul, o seu não se vai 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 píxeis, cada cor adicional acrescenta confusão. Aposte em uma ou duas cores mais, no máximo, branco ou preto. As cores saturadas funcionam melhor em tamanhos pequenos do que os tons pastel, que tendem a misturar-se com o fundo do separador.

Inspire-se um pouco no pensamento da acessibilidade. As WCAG pedem um contraste de pelo menos 3:1 para objetos gráficos relevantes (critério de êxito 1.4.11, Contraste de Elementos Não Textuais). Um favicon não é formalmente abrangido, uma vez que faz parte da interface do navegador e não do conteúdo da página, mas 3:1 entre o glifo e o seu fundo, e entre o ícone e o separador, é uma meta sensata. Evite também comunicar o que quer que seja apenas através do matiz: variantes vermelha e verde do mesmo ícone são indistinguíveis para muitos utilizadores daltónicos, por isso varie a forma ou acrescente um símbolo.

5. Forma, margens e zonas seguras

Preencha o quadrado

Os separadores do navegador mostram o favicon num tamanho pequeno fixo, por isso uma margem extra só torna a sua marca mais pequena. Para os ícones de separador normais, utilize a maior parte da tela, com apenas um ou dois píxeis de folga, para que a marca seja o maior possível.

Arredondado ou quadrado?

Em geral, os navegadores não recortam os favicons dos separadores, por isso a forma que desenha é a forma que os utilizadores veem. Um quadrado com cantos ligeiramente arredondados parece arrumado e dá um fundo consistente; um glifo de forma livre ou um círculo sobre transparência pode parecer mais leve e mais distintivo. Ambos servem. Escolha um e mantenha todo o seu conjunto de ícones coerente.

Ícones Apple touch

O iOS aplica os seus próprios cantos arredondados ao apple-touch-icon (180x180 é o tamanho habitual). Forneça um quadrado até às margens, sem cantos pré-arredondados, caso contrário podem aparecer pequenas lascas escuras ou brancas nos cantos.

Ícones maskable para Android e PWAs

Os ícones maskable são recortados pelo sistema operativo em círculos, squircles ou outras formas. Mantenha todo o conteúdo importante dentro da zona segura: um círculo centrado no ícone com um raio de 40 por cento da largura do ícone. Estenda a cor de fundo até às extremidades para que qualquer máscara fique bem. Não reutilize como ícone maskable um favicon de separador justo, de ponta a ponta, porque a máscara irá cortá-lo.

6. Transparência

A transparência não é problema nos favicons de separador, e é o que permite a um ícone só com glifo assentar bem em qualquer cor de separador. Já é um problema nos ícones Apple touch: o iOS preenche as áreas transparentes com uma cor sólida (tipicamente preto), o que pode arruinar o design. Dê sempre ao apple-touch-icon um fundo opaco na cor da marca. O mesmo se aplica aos ícones maskable e à maioria dos casos de ecrã inicial do Android, onde um fundo opaco dá resultados previsíveis.

7. Estabilidade: não o altere com demasiada frequência

Um favicon constrói reconhecimento através da repetição. Mudá-lo com frequência obriga os utilizadores a reaprender qual é o seu separador e causa também dores de cabeça técnicas. Os navegadores guardam os favicons em cache de forma agressiva, e o Google obtém-nos e armazena-os separadamente das suas páginas, pelo que um novo ícone pode demorar dias ou semanas a aparecer nos resultados de pesquisa. O Google também pede um URL de favicon estável, um ícone cujo tamanho seja múltiplo de 48 píxeis (48x48, 96x96, etc.) e um ficheiro que possa rastrear (não bloqueado pelo robots.txt). Trate uma mudança de favicon como uma decisão ao nível de um rebranding, não como uma decoração sazonal.

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

Algumas aplicações web alteram o favicon para indicar mensagens por ler, estado de gravação ou um erro. Bem feito, é útil; em excesso, é irritante.

• Use um pequeno selo (um ponto ou uma contagem curta) num canto, e não uma reformulação completa. O ícone base deve continuar reconhecível.
• Seja parcimonioso. Reserve os selos para eventos que exijam uma ação do utilizador. Não anime o ícone continuamente.
• Limite os números. A 16x16 só um ou dois dígitos são legíveis; mostre "9+" ou um simples ponto em vez de "137".
• Reponha rapidamente quando o utilizador tiver tratado do assunto, e restaure o ícone predefinido.
• Não dependa apenas da cor. Um ponto vermelho deve ser também reforçado pelo título da página, por exemplo "(3) Caixa de entrada", para que a informação esteja disponível para todos.

Os favicons dinâmicos são normalmente desenhados num canvas e substituídos atualizando o href do elemento link do ícone. Limite a frequência das atualizações, porque alterar constantemente o favicon pode consumir CPU e distrair os utilizadores.

9. Desempenho

Os favicons são pequenos, mas continuam a ser pedidos que podem ser mal geridos.

• Mantenha os ficheiros pequenos. Um favicon PNG tem tipicamente entre algumas centenas de bytes e alguns kilobytes. Um SVG simples pode ter menos de 1 KB.
• Evite ficheiros ICO inchados. Um ICO com vários tamanhos, com imagens de 16, 32 e 48 píxeis, é suficiente. Incorporar uma imagem de 256x256 multiplica o tamanho do ficheiro sem benefício visível nos separadores do navegador.
• Defina cabeçalhos de cache. Sirva os ícones com uma duração longa de Cache-Control, por exemplo public, max-age=31536000, immutable, e use um nome de ficheiro com versão ou hash quando os alterar.
• Declare os ícones explicitamente. Os navegadores pedem /favicon.ico por predefinição, por isso forneça um mesmo que declare outros ícones, para evitar ruído de 404 nos seus registos.
• Comprima. Passe os PNG por um otimizador sem perdas e minifique os SVG.

<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 quiser gerar todos estes ficheiros a partir de uma única imagem de origem, o gerador de favicons MakeFav produz o conjunto padrão, e a página para programadores descreve as opções de integração.

10. Acessibilidade

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

• O título da página transmite o significado. Escreva elementos <title> únicos e descritivos. Nunca dependa do ícone para transmitir um estado; reflita qualquer selo no título.
• Visibilidade para utilizadores com baixa visão. Alto contraste, uma forma em negrito e uma marca grande ajudam os utilizadores que percorrem os separadores visualmente.
• Independência da cor. Garanta que são as formas ou letras, e não apenas o matiz, a distinguir os estados.
• Menos distração. Evite favicons intermitentes ou animados, que podem ser um problema para utilizadores sensíveis ao movimento.

Checklist de UX do 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 no Chrome, Firefox, Safari e Edge, pois cada um escolhe ícones e tamanhos de forma ligeiramente diferente.
2. Modo claro e escuro. Mude o tema do SO e do navegador e observe a barra de separadores de cada vez.
3. Ecrãs retina e normais. Verifique num monitor 1x e num ecrã 2x ou 3x, e use o zoom no navegador.
4. Barra de marcadores. Adicione a página aos marcadores e veja se o ícone continua legível ao lado de outros sites.
5. Muitos separadores. Abra 20 separadores e veja se consegue encontrar o seu de relance.
6. Pré-visualização nos resultados do Google. Verifique um resultado de pesquisa no telemóvel depois de o ícone ter sido rastreado novamente. Lembre-se de que a atualização pode demorar.
7. Ecrã inicial. Adicione o site aos ecrãs iniciais do iOS e do Android e confirme que o ícone não está cortado, não tem cantos pretos e não fica demasiado pequeno dentro da máscara.
8. Verificação técnica. Passe o seu domínio pelo verificador de favicons MakeFav para confirmar que os ficheiros existem, devolvem o estado 200, têm os tamanhos certos e estão corretamente declarados no seu HTML.

Um fluxo de trabalho prático

1. Comece pelo símbolo da sua marca 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 píxeis.
4. Gere o conjunto completo (ICO, PNG, apple-touch-icon, ícones do manifesto) com o gerador.
5. Adicione as etiquetas link, defina os cabeçalhos de cache, publique e verifique com o verificador.

Um favicon é um dos recursos mais pequenos do seu site e um dos mais vistos. Algumas decisões cuidadas sobre contraste, simplicidade e coerência fazem-no funcionar em todos os separadores, temas e dispositivos.

Perguntas frequentes

Que tamanho deve ter um favicon?

Desenhe para 16x16 e 32x32 para os separadores do navegador (o navegador usa 32x32 em ecrãs de alta densidade), forneça um apple-touch-icon de 180x180 para o iOS e PNG de 192x192 e 512x512 para Android e PWAs. Para os resultados de pesquisa do Google, use um ícone quadrado cujo tamanho seja múltiplo de 48 píxeis, como 48x48 ou 96x96. Uma fonte SVG escala para todos eles.

Devo usar o meu logótipo completo como favicon?

Normalmente não. Os logótipos completos com texto são demasiado detalhados e demasiado largos para um ícone quadrado de 16x16. Use o símbolo da marca ou um monograma de uma ou duas letras e simplifique-o para que continue reconhecível quando minúsculo.

Como faço um favicon funcionar no modo escuro?

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

Porque é que o meu novo favicon não aparece?

Os navegadores guardam os favicons em cache durante muito tempo, e o Google guarda a sua própria cópia, que atualiza segundo o seu próprio calendário, demorando muitas vezes dias ou semanas. Atualize a página forçando o recarregamento, limpe a cache do navegador, use um novo nome de ficheiro com versão e certifique-se de que as etiquetas link e um /favicon.ico na raiz apontam para o ficheiro certo. Pode verificar a configuração com o verificador MakeFav.

É boa ideia mostrar selos de notificação num favicon?

Sim, se usados com moderação. Um pequeno ponto ou uma contagem de um ou dois dígitos ajuda os utilizadores a aperceberem-se de algo que requer ação, mas animações constantes ou números grandes prejudicam a legibilidade e a atenção. Reflita sempre o estado no título da página, restaure o ícone predefinido quando o assunto estiver tratado e não dependa apenas da cor.