Como montar um conjunto completo de favicons para o seu site
O que esta ferramenta gera
Um favicon raramente é um único arquivo. Navegadores, celulares e aplicativos web instalados pedem cada um uma resolução diferente, então um site precisa de uma pequena família de ícones em vez de uma imagem só. Esta ferramenta parte de uma única origem — uma imagem enviada, uma ou duas letras de texto ou um emoji — e a gera em todos os tamanhos que um site moderno espera.
Os ícones finais voltam como arquivos PNG, junto de um site.webmanifest e de um trecho de HTML que os liga à sua página, sem deixar dúvida sobre qual tag aponta para cada arquivo.
Três pontos de partida
Você pode enviar uma imagem em PNG, JPG, SVG ou WebP e deixar a ferramenta reduzi-la a cada tamanho de ícone. Para uma marca de texto, digite um ou dois caracteres e escolha uma fonte e uma cor de texto — útil quando a logo ainda não está pronta. O caminho do emoji permite escolher de uma seleção ou colar qualquer emoji que o seu sistema aceite.
Seja qual for a origem, valem os mesmos ajustes de estilo: cor de fundo, arredondamento dos cantos por um controle de border-radius e uma chave de fundo transparente para ícones que não devem ficar sobre um quadrado sólido. Se a cor da marca ainda não está definida, o gerador de gradientes CSS é um lugar rápido para testar combinações e escolher uma como fundo; e, exportados os ícones, a marcação do head que os declara fica ao lado das tags que o gerador de meta tags escreve.
Um exemplo concreto
Digamos que você digite a letra A, defina um fundo azul e aumente o border-radius para suavizar os cantos. A pré-visualização se atualiza em todos os tamanhos ao mesmo tempo, e o download entrega favicon-16x16.png, favicon-32x32.png e favicon-48x48.png para as abas do navegador e os blocos do Windows, apple-touch-icon.png em 180×180 para as telas iniciais do iOS, além de android-chrome-192x192.png e android-chrome-512x512.png para Android e instalações PWA — tudo dentro de um único ZIP.
Tamanhos, formatos e as tags link
Cada tamanho tem uma função: 16×16 e 32×32 aparecem nas abas do navegador, 48×48 cobre o Windows, 180×180 é o touch icon da Apple, e 192×192 e 512×512 alimentam o Android e o manifest do aplicativo web. O trecho gerado os declara com tags <link rel="icon">, <link rel="apple-touch-icon"> e <link rel="manifest">, mais uma meta theme-color, pronto para colar direto no seu <head>.
A saída é PNG, e não um antigo arquivo .ico de múltiplas resoluções, e todo navegador atual aceita favicons PNG por meio dessas tags link. Se quiser que ícones arredondados se integrem à barra de abas, ative o fundo transparente para que os cantos fiquem livres em vez de mostrar um quadrado colorido.