Design de favicon: ícones minúsculos com a tua cara

Um favicon é o pequeno ícone quadrado que representa o teu site em separadores do navegador, favoritos, histórico, ecrãs iniciais de telemóvel e resultados do Google. Costuma aparecer com apenas 16 ou 32 píxeis, por isso o bom design de favicon é implacável: uma só forma ou letra forte, muito contraste, nada de pormenor fino. Tecnicamente só precisas de um punhado de ficheiros, um ICO de 32×32, um SVG, um Apple touch icon de 180×180 e dois PNG de manifesto, mais algumas linhas de HTML.

Tamanhos de favicon e os ficheiros de que realmente precisas

Os guias antigos listam vinte tamanhos. Os navegadores modernos redimensionam bem, por isso um conjunto curto cobre todos os sítios 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 suas diretrizes de favicon pedem um ícone quadrado, recomendam um maior do que 48×48 píxeis e dizem que deve representar a tua marca. Os PNG de 192 e 512 cumprem ambos; confirma essa página antes do lançamento, porque a Google a revê.

Como adicionar um favicon ao teu 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" }
  ]
}

Desenhar um favicon que se lê a 16 píxeis

A 16 píxeis tens 256 pontos. Um logótipo tipográfico completo vira uma mancha cinzenta, os traços finos desaparecem e duas cores parecidas fundem-se. Os favicons que as pessoas reconhecem de imediato são quase sempre uma de três coisas: uma só letra, um símbolo simples ou uma forma sólida numa cor distintiva.

Cor e gradientes num ícone minúsculo

A cor faz mais trabalho do que a forma neste tamanho, porque é o que as pessoas procuram ao longo de uma fila de separadores. Uma cor de marca reconhecível vence um símbolo engenhoso. Os gradientes podem funcionar se forem fortes e curtos: dois pontos com uma diferença clara de luminosidade lêem-se como uma superfície iluminada, enquanto uma mistura subtil de vários pontos fica só turva a 16 píxeis.

Se a tua marca já tem um fundo de assinatura, um recorte dele pode dar um mosaico de favicon distintivo. Os Marks do Gradiently são úteis aqui: o mesmo visual que corre por trás das tuas publicações pode ficar por trás de uma só letra a 512×512, para o separador e o feed parecerem uma só marca. Garante que a letra mantém um forte contraste com o mosaico, como se explica em logótipo sobre fundo em gradiente.

Favicons para o modo escuro com SVG

Um ícone preto desaparece numa barra de separadores escura, e um branco numa barra clara. Como um favicon SVG é um pequeno documento, pode levar a sua própria media query e trocar de cores com 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 mosaico sólido por trás do símbolo é o seguro mais simples: lê-se sobre qualquer fundo, claro ou escuro, sem depender da media query. SVG ou PNG explica porque o ficheiro vetorial é o que deves guardar.

Uma lista rápida para o favicon

1. 1

   Parte da parte mais simples do teu logótipo

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

2. 2

   Desenha-o primeiro a 32×32

   Desenha na grelha pequena e amplia, e não ao contrário. Traços grossos, espaços generosos.

3. 3

   Exporta os cinco ficheiros

   ICO a 32×32, SVG, Apple touch icon de 180×180, PNG de manifesto de 192 e 512.

4. 4

   Testa em separadores reais

   Abre o teu site ao lado de dez outros, em temas claros e escuros. Se não encontras o teu separador num segundo, simplifica.

O favicon fica ao lado da tua imagem Open Graph e das fotografias de perfil das redes sociais como os sinais pequenos e constantes de uma marca. Mantém-nos coerentes e vê tamanhos de logótipo para o kit completo.