Gerador de favicon

Um único arquivo de ícone precisaria servir uma aba de navegador em 16 pixels, uma tela inicial de celular em 180 pixels, uma gaveta de apps Android em até 512 pixels, e um bloco da barra de tarefas do Windows — superfícies com regras de resolução, tratamento de proporção e composição de fundo radicalmente diferentes, nenhuma das quais compartilha uma única resolução de origem ideal. Historicamente, é por isso que sites ou enviavam apenas um `favicon.ico` de baixa resolução que parecia borrado em todo lugar mais, ou simplesmente pulavam os ícones móveis e PWA. Gerar todo tamanho a partir de uma fonte e empacotá-los juntos é o que faz um ícone parecer nítido e correto em todos ao mesmo tempo, em vez de aceitável em um e errado em todos os outros.

O manifesto web existe por uma razão relacionada mas distinta: é o que permite que navegadores Android e Chromium de desktop ofereçam "Instalar app" e mostrem o site com seu próprio ícone e nome uma vez instalado, em vez de como um favorito com um ícone genérico de globo. Um favicon e um ícone PWA são tratados por partes diferentes da plataforma, por isso tanto um conjunto simples de ícones quanto um manifesto são gerados juntos aqui.

A aba do navegador é a renderização menor e mais frequentemente vista de um favicon, e é implacável: em 16×16 pixels há espaço para uma forma marcante, duas no máximo, e efetivamente nenhum espaço para texto além de uma única letra ou número. Um logotipo completo com vários elementos que parece polido em tamanho normal tipicamente vira uma mancha indistinta no tamanho de aba, porque o detalhe que o torna reconhecível simplesmente não tem pixels restantes para renderizar.

As imagens de origem mais confiáveis são um único glifo, monograma, ou ícone simples em um fundo liso ou transparente, idealmente fornecidas em 512×512 ou maior para que todo tamanho gerado seja uma redução limpa em vez de uma ampliação. Se o logotipo existente é complexo, geralmente é melhor extrair ou simplificar um único elemento reconhecível dele — um monograma, um símbolo, uma forma distintiva — em vez de reduzir tudo e esperar que se mantenha coerente.

Um favicon com fundo transparente se adapta limpamente tanto a temas claros quanto escuros de abas de navegador, o que é a escolha certa sempre que a própria arte não precisa de um. Alguns destinos não conseguem usar transparência de forma alguma, porém — o ícone touch da Apple em particular é composto pelo iOS sobre um fundo sólido antes que sua própria máscara de cantos arredondados seja aplicada, então uma fonte transparente produz um logotipo flutuando em preto em vez do bloco limpo que todo outro ícone de app iOS tem. Escolher uma cor de fundo sólida de antemão, combinada com uma cor de marca em vez de deixada como branco ou preto padrão, é o que mantém o ícone parecendo deliberado em toda superfície em vez de apenas correto em algumas delas.