Como fazer um favicon.ico: os tamanhos e formatos que você realmente precisa

Um arquivo favicon.ico pode conter várias imagens de tamanhos diferentes, e o navegador escolhe a mais adequada: 16×16 para abas, 32×32 para telas de alta densidade e a barra de tarefas, 48×48 para atalhos do Windows. Com os três em um só ICO você cobre quase todos os casos.

Celulares usam arquivos separados. O iOS procura um PNG de 180×180 (apple-touch-icon), e o Android e os apps web instaláveis usam PNGs de 192×192 e 512×512 declarados num manifesto web.

O ICO é a opção mais compatível e a que os navegadores pedem automaticamente em /favicon.ico. Favicons em PNG funcionam em todos os navegadores modernos quando você os vincula. Os SVG ficam perfeitos em qualquer tamanho e são suportados pelo Chrome, Edge e Firefox atuais, mas não por todos os navegadores, então mantenha um ICO como reserva.

Comece de uma imagem quadrada e simplifique: uma letra ou uma forma marcante sobrevivem à redução; um logo detalhado com texto pequeno vira um borrão. Use bastante contraste e veja como fica em abas claras e escuras.

Se o seu logo é SVG, converta a partir do SVG e não de um PNG. O vetor é redesenhado em cada tamanho, então até a versão de 16 pixels fica nítida.

Converta seu PNG, JPG ou SVG com a ferramenta PNG para ICO ou SVG para ICO do Localvert. Você recebe um único favicon.ico com versões de 16, 32 e 48 pixels. Imagens que não são quadradas ganham margens em vez de serem cortadas, e a transparência é mantida.

Coloque o favicon.ico na raiz do site e adicione esta linha dentro do <head>: <link rel="icon" href="/favicon.ico" sizes="any">. Os navegadores guardam o favicon em cache por muito tempo; se a mudança não aparecer, teste numa janela anônima.