Design de favicon: ícones minúsculos que ainda têm a sua cara

O favicon é o pequeno ícone quadrado que representa o seu site nas abas do navegador, nos favoritos, no histórico, na tela inicial do celular e nos resultados do Google. Ele costuma aparecer com só 16 ou 32 pixels, então um bom design de favicon é implacável: uma forma ou letra forte, alto contraste, nenhum detalhe fino. Tecnicamente, você só precisa de poucos arquivos, um ICO de 32×32, um SVG, um Apple touch icon de 180×180 e dois PNGs do manifesto, mais algumas linhas de HTML.

Tamanhos e arquivos de favicon de que você realmente precisa

Guias antigos listam vinte tamanhos. Os navegadores modernos redimensionam bem, então um conjunto curto cobre todos os lugares onde um favicon aparece. Isto segue a abordagem recomendada no web.dev para manifestos e o comportamento atual dos navegadores para o resto.

A Pesquisa Google também mostra favicons ao lado dos resultados. As diretrizes de favicon dela pedem um ícone quadrado, recomendam um maior que 48×48 pixels e dizem que ele deve representar a sua marca. Os PNGs de 192 e 512 se qualificam; confira essa página antes do lançamento, porque o Google a revisa.

Como colocar um favicon no seu site

<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">

{
  "name": "Studio Nine",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}

Criando um favicon legível a 16 pixels

A 16 pixels você tem 256 pontos. Um logotipo com o nome inteiro vira uma mancha cinza, traços finos somem e duas cores parecidas se fundem. Os favicons que as pessoas reconhecem na hora quase sempre são uma de três coisas: uma única letra, um símbolo simples ou uma forma sólida numa cor marcante.

Cor e gradientes num ícone minúsculo

Nesse tamanho, a cor trabalha mais do que a forma, porque é o que as pessoas procuram numa fileira de abas. Uma cor de marca reconhecível vence um símbolo engenhoso. Gradientes podem funcionar se forem fortes e curtos: duas paradas com uma diferença clara de luminosidade parecem uma superfície iluminada, enquanto uma mistura sutil de várias paradas só fica turva a 16 pixels.

Se a sua marca já tem um fundo de assinatura, um recorte dele pode virar um bloco de favicon marcante. Os Marks do Gradiently são úteis aqui: o mesmo visual que fica atrás dos seus posts pode ficar atrás de uma única letra em 512×512, para que a aba e o feed pareçam uma só marca. Garanta que a letra mantenha um contraste forte com o bloco, como explica logotipo sobre fundo em gradiente.

Favicons para modo escuro com SVG

Um ícone preto some numa barra de abas escura, e um branco numa barra clara. Como um favicon em SVG é um pequeno documento, ele pode levar a sua própria media query e trocar de cores conforme o tema do navegador.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1e1b4b; }
    path { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e7ff; }
      path { fill: #1e1b4b; }
    }
  </style>
  <rect width="32" height="32" rx="7"/>
  <path d="M9 24V8h3l8 10V8h3v16h-3l-8-10v10z"/>
</svg>

Um bloco sólido atrás do símbolo é o seguro mais simples: ele fica legível em qualquer fundo, claro ou escuro, sem depender da media query. SVG ou PNG explica por que o arquivo vetorial é o que vale guardar.

Um checklist rápido de favicon

1. 1

   Comece pela parte mais simples do seu logotipo

   Um monograma, a primeira letra ou só o símbolo. Variações de logotipo mostra como construir uma versão pequena de propósito.

2. 2

   Desenhe primeiro em 32×32

   Crie na grade pequena e amplie, não o contrário. Traços grossos, espaços generosos.

3. 3

   Exporte os cinco arquivos

   ICO em 32×32, SVG, Apple touch icon de 180×180, PNGs de 192 e 512 para o manifesto.

4. 4

   Teste em abas de verdade

   Abra o seu site ao lado de outros dez, nos temas claro e escuro. Se você não acha a sua aba em um segundo, simplifique.

O favicon fica ao lado da sua imagem Open Graph e das fotos de perfil nas redes sociais como os sinais pequenos e constantes de uma marca. Mantenha todos consistentes, e veja tamanhos de logotipo para o kit completo.