Tamanho do favicon: 16, 32, 48, 180, 192 e 512 px explicados (e como fazer)

16×16 px: a aba do navegador. 32×32 px: abas em telas de alta densidade, favoritos e a barra de tarefas do Windows. 48×48 px: atalhos do Windows e o mínimo que o Google usa para o ícone ao lado do seu site nos resultados (o Google pede uma imagem quadrada com tamanho múltiplo de 48 px, como 48, 96 ou 144).

PNG de 180×180 px: o ícone que iPhone e iPad mostram quando alguém adiciona o site à tela inicial (apple-touch-icon). PNG de 192×192 e 512×512 px: telas iniciais do Android e apps web instaláveis, declarados no manifesto; o de 512 px também aparece na tela de abertura.

Se for fazer só uma coisa, crie um favicon.ico com 16, 32 e 48 px dentro e um PNG de 180 px. Isso cobre abas, resultados de busca e celulares.

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.