Favicon (abreviação de Favorites Icon, também chamado ícone de site, ícone de marcador) é o pequeno ícone exibido na aba do navegador, barra de marcadores, histórico de navegação, barra de endereço, é um dos elementos básicos de identificação de marca de um site. Um site sem favicon exibe ícone de documento em branco entre várias abas, parecendo não profissional; um favicon bem projetado permite que usuários encontrem seu site rapidamente entre várias abas, é recurso básico essencial antes do lançamento de um site.
Sites modernos precisam de mais do que apenas um favicon.ico. Com a popularização de dispositivos móveis e desenvolvimento de PWA (Progressive Web App), um pacote completo de ícones de site precisa incluir vários tamanhos e formatos: o tradicional favicon.ico compatível com navegadores antigos, PNG 16/32 para abas e marcadores de navegador comum, apple-touch-icon 180×180 para usuários de iPhone/iPad「adicionar à tela inicial」, PNG 192/512 para tela inicial Android e tela de abertura PWA, e site.webmanifest informando ao navegador a localização desses ícones e cor do tema. Criar manualmente todos esses tamanhos e escrever o código de referência HTML correto é uma tarefa chata para desenvolvedores sem formação em design.
Favicon de texto é a forma mais rápida: maioria dos blogs pessoais, projetos open source, sistemas internos na verdade não precisam de design de logo complexo, usar a inicial da marca (como G para Google, F para Facebook) combinada com cor da marca faz um ícone de texto simples com ótimo resultado. A ferramenta oferece 8 fontes comuns do sistema, ajuste de tamanho, personalização de cor, sem precisar abrir Photoshop/Figma, você faz um favicon profissional em um minuto.
Favicon de Emoji é uma solução simples popular nos últimos anos: Emoji por si só são pequenos ícones desenhados por designers, cores vibrantes e alto reconhecimento, usar um Emoji relacionado (como foguete 🚀 para velocidade, lâmpada 💡 para criatividade, chama 🔥 para popular) como favicon em projetos pessoais, protótipos, sites de documentação é divertido e prático, muito melhor do que ícone em branco, além de ter consistência entre plataformas (embora a renderização varie ligeiramente entre sistemas).
Modo imagem é adequado para cenários com logo existente: se você já tem imagem de logo da marca, após upload a ferramenta corta automaticamente ao centro como quadrado, gera todos os tamanhos necessários. Observe que em tamanhos pequenos o ícone tem apenas 16 pixels de largura, logos complexos ao reduzir ficarão borrados como um borrão, por isso favicon geralmente não é o logo completo, mas a parte do símbolo/identidade do logo — como o swoosh da Nike, a maçã da Apple, o M do McDonald's, formas simples permanecem legíveis em tamanhos pequenos.
Por que gerar localmente sem enviar ao servidor? Primeiro, privacidade: logos de marca não publicados, designs de cliente são ativos sensíveis, enviar para servidores de ferramentas de terceiros tem risco de vazamento; segundo, velocidade: desenho local em Canvas é concluído instantaneamente, sem esperar upload/download; terceiro, confiabilidade: não precisa de rede, funciona também em ambientes de rede interna. Todo processamento de imagem usa API Canvas nativa do navegador, empacotamento ZIP usa biblioteca JSZip puramente em JS, sem necessidade de serviço backend.
Três formatos (quadrado, cantos arredondados, circular) servem para adaptar a diferentes estilos de plataforma: Windows tradicionalmente usa ícones quadrados, iOS/iPadOS usa retângulos com cantos arredondados (Squircle), Android e alguns sites usam ícones circulares. O arredondamento de 22% na ferramenta é um tamanho de arredondamento bastante genérico, próximo ao estilo de UI moderno. Observe que na exibição real os navegadores geralmente não cortam o ícone em formato circular (exceto alguns navegadores), o formato circular afeta principalmente a aparência após adicionar à tela inicial do celular.
É importante observar: ① o efeito do favicon depende altamente da simplicidade do design, padrões complexos certamente ficarão borrados em 16×16, recomenda-se usar texto/forma/Emoji simples; ② o efeito de renderização de Emoji depende da fonte do sistema operacional, Emojis vistos em diferentes sistemas podem ter pequenas diferenças; ③ o arquivo ICO é gerado com base em PNG 32×32 incorporado, atende à maioria das necessidades de compatibilidade; ④ fundo transparente em alguns navegadores muito antigos pode ser exibido como fundo preto ou branco, recomenda-se usar cor de fundo no site principal para mais segurança.
