Crie um pacote de favicon a partir de uma única imagem

Use isto quando um site ainda precisa de um favicon.ico clássico, além dos ícones PNG que celulares e navegadores realmente mostram. Uma imagem de origem basta: um logo quadrado em PNG ou SVG funciona melhor. A imagem é encaixada num quadrado (encaixar), então uma marca larga ganha margem em vez de deformar.

Os PNGs baixados saem, por padrão, com fundo transparente. O ICO coloca um branco opaco (ou a cor que você escolhe) atrás da marca, porque boa parte da interface antiga de abas ainda espera um ícone opaco. Aqui não tem camadas. Se você precisa cortar ou colocar texto antes, faça isso no Photasium e solte o resultado aqui.

O zip traz favicon.ico (16 e 32), PNG em 16, 32, 180, 192 e 512, e apple-touch-icon em 180. Cole o trecho no head do seu documento. As entradas opcionais de 192 e 512 são o que um manifesto de aplicativo web costuma pedir. Você mesmo copia os nomes de arquivo para o manifest.json.

Depois de baixar, comprima só se um PNG ainda estiver pesado. Favicons devem continuar pequenos. Para uma imagem em redes, use Imagem OG 1200×630 no lugar deste pacote.

O trabalho acontece neste navegador. Sem conta, e nada é enviado. Feche a aba, e o logo some da ferramenta.