[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:pt:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-pt-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","Tamanhos de Favicon: Quais Você Realmente Precisa em 2025","Um guia direto sobre tamanhos de favicon: 16x16, 32x32, 180x180, 192 e 512, quais os navegadores modernos usam, e o HTML para adicionar.","2026-10-12","favicon size","favicon-generator","\u003Cp>Procure "favicon size" e você encontra uma enxurrada de números conflitantes: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. A maioria dessas listas foi escrita uma década atrás e nunca foi atualizada. Na prática, um site moderno precisa de cerca de quatro arquivos, e você pode criar todos eles em uma única passagem com o \u003Ca href=\"\u002Fpt\u002Ffavicon-generator\">gerador de favicon\u003C\u002Fa> — ele funciona inteiramente no seu navegador, então seu logo nunca sai da sua máquina.\u003C\u002Fp>\n\u003Cp>Aqui está para o que cada tamanho é realmente usado, e o que você pode pular com segurança.\u003C\u002Fp>\n\u003Ch2>Os tamanhos que ainda importam\u003C\u002Fh2>\n\u003Ch3>16x16 e 32x32 — abas do navegador e marcadores\u003C\u002Fh3>\n\u003Cp>Este é o favicon clássico. 16x16 é o que você vê em uma barra de abas lotada; 32x32 é usado em telas de alta DPI, na barra de marcadores e em algumas UIs da barra de endereços. Ambos são tradicionalmente agrupados em um único arquivo \u003Ccode>favicon.ico\u003C\u002Fcode>, que pode conter múltiplas resoluções ao mesmo tempo. O Windows também extrai 48x48 do mesmo \u003Ccode>.ico\u003C\u002Fcode> para atalhos de desktop, então incluir não custa quase nada.\u003C\u002Fp>\n\u003Ch3>180x180 — ícone de toque Apple\u003C\u002Fh3>\n\u003Cp>Quando alguém toca em "Adicionar à Tela de Início" em um iPhone ou iPad, o Safari procura por \u003Ccode>apple-touch-icon.png\u003C\u002Fcode> em 180x180. Se não estiver lá, o iOS tira uma captura de tela da sua página e usa isso, que fica horrível. Este PNG cobre todos os dispositivos iOS atuais porque o sistema redimensiona conforme necessário.\u003C\u002Fp>\n\u003Ch3>192x192 e 512x512 — Android e PWAs\u003C\u002Fh3>\n\u003Cp>O Android Chrome e aplicativos web instaláveis leem ícones do seu \u003Ccode>site.webmanifest\u003C\u002Fcode>. 192 é o ícone da tela inicial; 512 é usado para a tela de abertura e listagens de aplicativos. Se você quiser que seu site seja instalável, precisa de ambos.\u003C\u002Fp>\n\u003Ch3>SVG — opcional mas bacana\u003C\u002Fh3>\n\u003Cp>Firefox e Chrome ambos suportam um favicon SVG, que permanece nítido em qualquer tamanho e pode responder ao modo escuro com uma media query dentro do arquivo. É um bônus, não uma substituição — Safari e navegadores mais antigos ainda querem as versões raster.\u003C\u002Fp>\n\u003Ch2>O que você pode pular\u003C\u002Fh2>\n\u003Cp>64x64, 96x96, 128x128, todo o conjunto de imagens de bloco do Windows e as dúzias de arquivos legados do tipo \u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode>. Eram necessários para dispositivos que na maioria desapareceram. Enviar vinte arquivos de ícone incha seu repositório e não traz ganho mensurável.\u003C\u002Fp>\n\u003Ch2>O HTML\u003C\u002Fh2>\n\u003Cp>Coloque os arquivos na raiz do seu site e adicione isso ao \u003Ccode><head>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>E no manifesto:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Projetando para 16 pixels\u003C\u002Fh2>\n\u003Cp>A parte difícil não é a exportação, é que um logo completo vira sopa em 16x16. Algumas coisas que ajudam:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Use um fragmento, não o logo inteiro.\u003C\u002Fstrong> Uma letra, um glifo, uma forma. Marcas de palavras são ilegíveis no tamanho de aba.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Comece quadrado.\u003C\u002Fstrong> Se seu original é um logo largo, \u003Ca href=\"\u002Fpt\u002Fcrop-image\">recorte para um quadrado\u003C\u002Fa> primeiro para que o gerador não o deixe com espaço vazio nas laterais.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Mantenha o contraste alto.\u003C\u002Fstrong> Contornos finos desaparecem. Formas sólidas sobrevivem.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Decida sobre o fundo.\u003C\u002Fstrong> Um PNG transparente se adapta ao chrome claro e escuro do navegador; se sua marca é escura, considere dar a ela um bloco de cor sólida. Você pode \u003Ca href=\"\u002Fpt\u002Fremove-background\">remover o fundo\u003C\u002Fa> de uma captura de tela de logo em segundos se você só tem um JPG simples.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Cuidado com a área segura.\u003C\u002Fstrong> Android mascara ícones em círculos e squircles, então deixe aproximadamente 10% de preenchimento ao redor da borda de sua arte de 512.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Se você está combinando o fundo do favicon com a cor da marca do seu site, o \u003Ca href=\"\u002Fpt\u002Fcolor-picker\">seletor de cores de imagem\u003C\u002Fa> extrai o hex exato de uma captura de tela existente — útil também para a tag meta \u003Ccode>theme-color\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Gere o conjunto completo de uma vez\u003C\u002Fh2>\n\u003Cp>Não envie nada: solte um PNG ou SVG quadrado no \u003Ca href=\"\u002Fpt\u002Ffavicon-generator\">gerador de favicon gratuito baseado em navegador\u003C\u002Fa> e ele produz o \u003Ccode>.ico\u003C\u002Fcode>, o ícone de toque Apple e os PNGs 192\u002F512 localmente, na sua própria aba. Nada é enviado para um servidor, não há inscrição necessária, e nenhuma cópia de seu logo não lançado fica guardada no bucket de armazenamento de alguém.\u003C\u002Fp>\n\u003Cp>Depois reduza o zoom do seu navegador, olhe para a aba e faça a única pergunta que importa: você consegue dizer o que é?\u003C\u002Fp>\n",1791831539491]