Gerador de Favicon

Importe uma imagem e gere todos os tamanhos padrão de favicon em PNG.

Arraste e solte uma imagem aqui, ou clique para selecionar

Imagens quadradas dão os melhores resultados (PNG, JPG, SVG)

Explicação dos tamanhos de favicon

16×16 · favicon de aba de navegador padrão

32×32 · aba Retina, atalho de barra de tarefas

48×48 · atalho de site do Windows

180×180 · Apple Touch Icon (tela inicial do iOS)

192×192 · Android Chrome, ícone de manifest PWA

512×512 · tela de abertura PWA, busca do Google

Uma breve história do favicon

O favicon nasceu como funcionalidade Microsoft no Internet Explorer 5, lançado em março de 1999. A Microsoft introduziu a convenção de procurar /favicon.ico na raiz do site e exibi-lo ao lado dos sites favoritados na barra Favoritos, daí o nome «favicon» (favorite icon). A escolha original foi o formato proprietário ICO do Windows, capaz de guardar vários tamanhos de bitmap num único arquivo. Outros navegadores adotaram a convenção quase imediatamente e passaram também a aceitar favicons PNG, sinalizados por tags <link rel="icon"> no head do documento. O iPhone da Apple (lançado em 2007) acrescentou a convenção apple-touch-icon, um PNG 180×180 usado quando o usuário adiciona um site à tela inicial do iOS, exibido no mesmo tamanho de um ícone de aplicativo nativo. As Progressive Web Apps (PWA, formalizadas por volta de 2015) acrescentaram o arquivo manifest.json com seu array icons, exigindo variantes 192×192 (prompt de instalação do Chrome) e 512×512 (telas de splash de PWA, telas iniciais Android, fixação no menu Iniciar do Windows). Os favicons SVG (suportados no Firefox desde a versão 41 em 2015, Chrome desde a versão 80 em fevereiro de 2020, Safari desde a versão 12.1 em 2019) são hoje a recomendação moderna quando o ícone é uma forma simples, um único arquivo escala perfeitamente para qualquer densidade de tela. O arquivo favicon.ico tradicional ainda é necessário para o Internet Explorer 11 e navegadores mais antigos; pilhas modernas entregam o SVG mais um ICO de fallback e um PNG apple-touch-icon.

Por que tantos tamanhos?

Cada tamanho do conjunto de favicon serve a um contexto de renderização diferente. 16×16 é o favicon clássico de aba de navegador em DPI padrão, o tamanho que ensinou designers o quão brutais podem ser as restrições de pixel. 32×32 é o tamanho de aba em alta DPI (Retina); muitos navegadores modernos o preferem mesmo para telas «padrão» porque ele reduz melhor do que 16×16 amplia. 48×48 é o tamanho que o Windows usa para atalhos da barra de tarefas e favicons de sites fixados. 180×180 é o apple-touch-icon, exibido quando o usuário adiciona um site à tela inicial do iOS. 192×192 é o prompt de instalação de web apps do Chrome e o ícone padrão da tela inicial Android. 512×512 é o ícone de tela de splash de PWA, miniaturas dos resultados Google e ícones de ladrilhos do menu Iniciar do Windows. A razão pela qual um único arquivo de alta resolução não basta: nos menores tamanhos, o ícone normalmente precisa de simplificação ajustada à mão para permanecer legível (um logotipo complexo em 16×16 vira uma mancha colorida), então o design profissional de favicons tipicamente envolve duas ou três variantes, uma versão detalhada para tamanhos grandes, uma simplificada para os médios e uma «só marca» para os menores. Este gerador escala uma única fonte por meio de redução padrão de vizinho mais próximo ou bilinear, o que vai bem para formas simples; logotipos complexos podem precisar de retoque manual nos menores tamanhos.

O HTML que acompanha os arquivos

Gerar os arquivos é metade do trabalho; a outra metade são as tags meta no seu <head> que dizem ao navegador qual arquivo usar em qual contexto. A pilha mínima viável de favicon em 2026:

<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

O navegador escolhe o arquivo mais adequado conforme a densidade de pixel do dispositivo e os formatos que ele suporta. Navegadores modernos preferem o SVG quando presente; antigos voltam para os tamanhos PNG; iOS usa o apple-touch-icon; a instalação PWA lê o manifesto. O favicon.ico na raiz continua sendo apanhado automaticamente como fallback padrão mesmo sem tag link explícita, todo site deveria ter um, por compatibilidade reversa com navegadores e ferramentas muito antigos.

Quando você realmente precisa gerar favicons

Projetando para a restrição de 16×16

O favicon de 16×16 é a restrição mais exigente do design de interface moderno. 256 pixels (todo o canvas do ícone) devem transmitir identidade de marca suficiente para que o usuário encontre sua aba entre outras vinte. Conselho prático de designers que fizeram isso muitas vezes: Simplifique agressivamente. Um logotipo complexo em 16×16 é uma mancha colorida. Tire detalhes até sobrar apenas a forma mínima reconhecível. Maximize o contraste contra os fundos de aba. Abas de navegador costumam ser cinza-claras ou cinza-escuras; um ícone com contraste fraco desaparece no chrome. Prefira formas únicas marcantes a linhas finas. Linhas com menos de 2 px de largura sofrem alias para cinza em 16 px e ficam invisíveis. Teste no tamanho real no seu navegador. O que parece ótimo na sua ferramenta de design em 256×256 pode ser ilegível em 16×16. Abra várias abas do seu site e olhe elas na barra de abas, esse é o teste real. Considere o caso do modo escuro. Um ícone projetado para uma barra de abas branca pode ser invisível numa barra escura. Favicons SVG podem incluir uma media query prefers-color-scheme dentro do SVG para adaptação automática claro/escuro; para fallbacks ICO e PNG, projete algo que funcione em ambos os fundos.

O que este gerador produz

Privacidade: processamento de imagem só no navegador

Um logotipo ou imagem de marca que você envia para gerar um favicon pode ser confidencial, trabalho de marca pré-lançamento, branding de ferramenta interna, logotipos de cliente sob NDA. Geradores de favicon do lado do servidor (o muito popular RealFaviconGenerator e similares) tomam uma cópia de cada imagem enviada na infraestrutura deles, onde fica em logs e caches. Este gerador roda inteiramente no seu navegador via Canvas API: a imagem é lida no navegador, redimensionada para cada tamanho de favicon pelo pipeline embutido de redimensionamento e empacotada para download, tudo na sua aba. Verifique na aba Rede do DevTools enquanto envia (nenhuma requisição dispara após a página carregar), ou coloque a página offline (modo avião) depois que ela carregar e o gerador continua funcionando com arquivos locais. Seguro para trabalho de marca não anunciado, logotipos de cliente sob NDA, branding de ferramenta interna ou qualquer imagem que você não queira ver copiada no disco rígido de um estranho.

Ferramentas relacionadas

Compressor de imagem

Comprima suas imagens até 80 % menores. Arraste e solte, download instantâneo. Nenhum envio ao servidor.

Redimensionador de imagem

Redimensione suas imagens para dimensões exatas em pixels. Predefinições para redes sociais, web e mais.

Conversor de imagem

Converta entre PNG, JPEG e WebP. Conversão em lote de vários arquivos de uma vez.