Guia de geração ICO/Favicon: ícones de site e ícones PWA

Imagem

Por que você precisa de um Favicon?

Um favicon é o pequeno ícone exibido nas abas do navegador, barras de favoritos e telas iniciais do celular. Um site profissional deve ter um — caso contrário:

  • A aba do navegador mostra um ícone em branco padrão, reduzindo o reconhecimento da marca
  • Os usuários não conseguem encontrar seu site rapidamente nos favoritos
  • Instalações PWA ficam sem um ícone de app

Especificações de tamanho de Favicon

Diferentes plataformas e contextos exigem diferentes tamanhos:

Tamanho Propósito Formato
16×16 Aba do navegador (menor) ICO/PNG
32×32 Aba do navegador (padrão) ICO/PNG
48×48 Barra de tarefas do Windows ICO
180×180 Apple Touch Icon (iOS) PNG
192×192 Android Chrome PNG
512×512 Ícone de inicialização PWA PNG

Sobre o formato ICO

ICO é um formato contêiner — um único arquivo ICO pode conter múltiplos tamanhos de ícone. O navegador seleciona automaticamente o tamanho mais apropriado. Por isso um arquivo ICO tem apenas algumas dezenas de KB mas funciona em todos os cenários.

Usando a ferramenta de geração ICO

Passo 1: Preparar a imagem fonte

Escolha uma imagem quadrada de alta resolução como fonte. Recomendações:

  • Pelo menos 512×512 (1024×1024 preferido)
  • Gráfico simples que permaneça reconhecível quando pequeno
  • Evitar texto pequeno — ilegível a 16×16

Passo 2: Enviar e gerar

  1. Abra o Gerador ICO
  2. Envie a imagem fonte (PNG, JPG, SVG suportados)
  3. Selecione os tamanhos necessários (padrão: todos — 16, 32, 48, 180, 192, 512)
  4. Clique em "Gerar"

Passo 3: Baixar arquivos

A ferramenta produz dois resultados:

  • favicon.ico — ICO multi-tamanho contendo 16×16, 32×32, 48×48
  • favicon-*.png — arquivos PNG individuais para cada tamanho

Referenciar Favicon no HTML

Coloque os arquivos na raiz do seu site ou pasta public/, depois adicione ao <head>:

<!-- ICO (suporte a navegadores antigos) -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG (navegadores modernos) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

Configuração por framework

Framework Como configurar
Next.js Colocar no diretório app/, autodetectado
Vite Colocar no diretório public/
Nuxt Colocar em public/ ou assets/
Create React App Colocar no diretório public/

Configuração de ícones PWA

PWA requer declarações de ícones no manifest.json:

{
  "name": "My App",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Notas sobre ícones maskable

Ícones maskable do PWA devem ter todo o conteúdo dentro da zona segura (80% interior). Os 20% exteriores podem ser cortados pelo SO em um círculo ou outra forma.

Dicas de design

Dica 1: Simplificar o gráfico

Um favicon tem apenas 16×16 pixels — designs complexos ficam uma bagunça borrada. Mantenha apenas o elemento central:

  • ❌ Logo completo + texto
  • ✅ Gráfico central ou primeira letra

Dica 2: Usar SVG como fonte

Imagens fonte vetoriais SVG permanecem nítidas em qualquer tamanho. Converta SVG para PNG com Conversão de formato antes de gerar ICO.

Dica 3: Suporte ao modo escuro

Navegadores modernos suportam o atributo media para favicons no modo escuro:

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

Problemas comuns

O ICO gerado não aparece no navegador?

  1. Verifique se o caminho do arquivo está correto
  2. Limpe o cache do navegador (Ctrl+Shift+R para forçar atualização)
  3. Verifique se as tags link estão dentro do <head>

O arquivo ICO é maior que um único PNG?

ICO contém múltiplos tamanhos, então é naturalmente maior. Um ICO típico de 16+32+48 tem cerca de 15-30 KB — perfeitamente aceitável.

Preciso de ICO e PNG?

Sim, forneça ambos. ICO suporta navegadores antigos; PNG oferece melhor qualidade de renderização em navegadores modernos.

Ferramentas relacionadas

Resumo

Favicons podem ser pequenos, mas são uma parte crucial da marca de um site. O Gerador ICO permite produzir rapidamente um conjunto completo de arquivos ICO e PNG a partir de uma única imagem fonte, cobrindo abas do navegador, Apple Touch Icons, Android Chrome e ícones de inicialização PWA. Lembre-se: imagem fonte simples e de alta resolução, ICO multi-tamanho e referências HTML completas.

#ICO#Favicon#网站图标#多尺寸#PWA