Gerador de Favicon - Crie favicon.ico e Ícones para PWA

O Que Este Gerador de Favicon Produz

Um favicon deixou de ser um único arquivo há muito tempo. Uma aba do navegador quer 16 pixels, uma aba retina quer 32, um atalho na área de trabalho do Windows quer 48, a tela de início do iPhone quer um PNG de 180 pixels e um aplicativo web instalável quer ícones de 192 e 512 pixels declarados em um manifesto. Esta ferramenta pega uma imagem de origem e gera tudo de uma vez: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png e um site.webmanifest, compactados em um ZIP junto com as quatro linhas de HTML que os conectam. O .ico é construído manualmente em vez de delegado a um conversor. ICO é um formato de contêiner, não um codec: um cabeçalho de diretório de seis bytes registra quantas imagens estão contidas, em seguida uma entrada de dezesseis bytes por imagem registra sua largura, altura, comprimento em bytes e offset absoluto, e os dados da imagem seguem em sequência. Todos os navegadores em uso aceitam dados PNG dentro desses dados, então este gerador grava PNGs em vez da codificação legada BMP/DIB com sua ordem de linhas de baixo para cima e máscara de transparência de um bit separada. Três imagens são inseridas — 16, 32 e 48 pixels — para que o Windows e navegadores mais antigos possam escolher o tamanho necessário em vez de redimensionar uma mal. Uma peculiaridade do formato é interessante se você inspecionar os bytes: largura e altura ocupam um único byte cada, então 256 é gravado como zero e nada maior pode ser expresso. A qualidade do redimensionamento recebe a mesma atenção. Encolher um logo de 1024 pixels diretamente para 16 pixels em uma única chamada drawImage pede ao filtro bilinear do navegador para resumir um bloco de 64 por 64 a partir de uma amostra de 2 por 2, descartando quase todos os pixels de origem e produzindo a bagunça granulada pela qual os favicons artesanais são conhecidos. Em vez disso, esta ferramenta divide a imagem pela metade repetidamente, nunca reduzindo mais que a metade em um único passo, para que cada passagem calcule a média de uma vizinhança completa e os detalhes finos sobrevivam até os 16 pixels. O raio do canto e o preenchimento são aplicados como parte dessa renderização, e não depois, o que mantém a borda arredondada com anti-aliasing em cada tamanho.