Favicon Checker

Um favicon é o pequeno ícone que um navegador mostra ao lado do título da sua página em abas, favoritos, listas de histórico e atalhos da tela inicial. O nome é uma abreviação para "favorite icon" (ícone favorito), cunhado pela Microsoft em 1999 quando IE 5 introduziu /favicon.ico na raiz do site. Hoje o favicon são seis arquivos, não um. Navegadores de desktop usam um PNG ou SVG de 32x32. iOS usa um PNG de 180x180 via apple-touch-icon. Android extrai PNGs de 192x192 e 512x512 do manifest.json. Abas fixadas do Safari usam um SVG monocromático via mask-icon. O /favicon.ico legado é o fallback quando nada mais é declarado. Uma configuração completa fornece a cada dispositivo o tamanho e formato corretos, mantém sua marca nítida em todas as escalas e evita o espaço reservado genérico do globo que plataformas móveis renderizam quando os ícones estão faltando ou dimensionados incorretamente.

Um verificador de favicon busca o HTML de qualquer URL, analisa cada tag de link da família favicon e relata quais ícones são declarados, seus tamanhos, formatos e se as URLs são resolvidas. Ele percorre o head procurando por <link rel="icon">, <link rel="shortcut icon">, <link rel="apple-touch-icon">, <link rel="mask-icon"> e <link rel="manifest">, depois sonda /favicon.ico na raiz do domínio como um fallback. Ele agrupa resultados por dispositivo de destino para que você veja o que desktop Chrome, iOS Safari, Android Chrome e abas fixadas do Safari cada um renderizam. Execute este teste de favicon antes de cada deploy para detectar variantes faltando, URLs quebradas e tamanhos errados em menos de três segundos. A saída também sinaliza se o próprio manifest.json retorna 200 e se o array de ícones dentro dele aponta para arquivos reais, que é onde a maioria dos bugs específicos do Android se escondem.

O conjunto moderno é 16x16, 32x32, 180x180, 192x192 e 512x512. Os PNGs de 16x16 e 32x32 lidam com abas de navegador de desktop e a barra de endereços. Navegadores escolhem a correspondência mais próxima ao tamanho renderizado, então enviar ambos evita aumentar. O PNG de 180x180 é o apple-touch-icon usado por iOS para tiles de tela inicial. Tamanhos menores são aumentados e ficam desfocados em telas Retina. Os PNGs de 192x192 e 512x512 ficam em manifest.json para telas iniciais do Android e telas de splash de PWA. Guias mais antigos recomendam dez ou mais tamanhos (57x57, 72x72, 114x114, 144x144). Navegadores modernos ignoram a maioria desses. Cinco arquivos cobrem todos os dispositivos reais, e o validador de favicon sinaliza qualquer tamanho que não corresponda às especificações para que você possa eliminar o inchaço legado.

Use todos os três para cobertura completa. ICO é o formato legado, obrigatório para /favicon.ico na raiz porque alguns navegadores e crawlers mais antigos apenas verificam lá. Um arquivo ICO multi-resolução de 16x16 mais 32x32 é o fallback mais seguro. PNG é o formato moderno de desktop e mobile. Use-o para <link rel="icon" sizes="32x32">, apple-touch-icon e os ícones do manifest. PNG trata transparência de forma limpa e renderiza nítido no tamanho declarado. SVG é o futuro. Use-o para <link rel="icon" type="image/svg+xml"> e o mask-icon do Safari. SVG escala para qualquer DPI sem desfoque, pesa 1-3 KB e suporta variantes de modo escuro via media queries. Cerca de 92% dos navegadores em uso hoje suportam favicons SVG, com os restantes 8% silenciosamente voltando ao PNG que você declarou.

Quando usuários do iOS tocam "Adicionar à Tela Inicial" do Safari, o SO extrai o apple-touch-icon para renderizar o tile da tela inicial. Se você não declarar um, iOS tira uma captura de tela da página e usa isso, que parece desfocada e sem marca. O tamanho esperado é PNG de 180x180 com fundo sólido, declarado como <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Cerca de 25% do tráfego móvel global vem do iOS, e um apple-touch-icon faltando significa que todos os usuários que salvam seu site veem um espaço reservado em vez do seu logo. A porção do verificador de apple-touch-icon desta ferramenta sinaliza se o arquivo é declarado, o tamanho corresponde a 180x180, a URL retorna 200 e o fundo é sólido em vez de transparente.

manifest.json é o Web App Manifest, um pequeno arquivo JSON que diz ao Android (e Chrome desktop) como seu site se comporta quando instalado como um Progressive Web App. Ele declara o nome do app, cor do tema, cor de fundo, modo de exibição e mais importante o array de ícones. Android extrai PNGs de 192x192 e 512x512 do manifest para renderizar o tile da tela inicial, tela de splash e entrada na gaveta de apps. Sem um manifest declarado via <link rel="manifest" href="/manifest.json">, Android volta a uma captura de tela da sua página ou um ícone de globo genérico. Cerca de 70% do tráfego móvel em todo o mundo roda em Android, então um manifest faltando é uma impressão de marca faltando toda vez que um usuário instala seu site ou o fixa na tela inicial.

mask-icon é uma declaração específica do Safari para ícones de aba fixada no macOS Safari. Quando um usuário fixa sua aba, Safari renderiza uma silhueta monocromática usando o SVG que você declara via <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">. O SVG deve ser um vetor de uma única cor. Safari ignora qualquer cor no arquivo e aplica o atributo color da tag de link. Cerca de 8% do tráfego de desktop global usa Safari, e abas fixadas são um recurso para usuários avançados, mas pular mask-icon significa que sua marca renderiza como um ponto espaço reservado genérico para esses usuários. O ícone deve ser simples, reconhecível em 16x16 e usar formas em negrito que se leiam claramente em monocromático sem linhas finas ou detalhes finos.

Cinco erros representam a maioria das configurações de favicon quebradas. Primeiro, declarar apenas /favicon.ico e pular as outras cinco variantes, deixando iOS e Android com espaços reservados. Segundo, enviar o tamanho de apple-touch-icon errado (152x152 em vez de 180x180), que iOS aumenta em borrão. Terceiro, esquecer de vincular manifest.json do head do HTML, que faz o Android ignorar completamente os ícones do manifest. Quarto, usar fundos transparentes em apple-touch-icons, que iOS renderiza como um quadrado preto em vez de honrar transparência. Quinto, cacheamento agressivo do navegador que mostra o favicon antigo por semanas após uma atualização. Corrija o problema do cache acrescentando uma string de consulta de versão (favicon.ico?v=2) ou usando nomes de arquivo com hash em seu pipeline de build.

Sim, se você se importa com como sua marca se parece em abas de modo escuro. Cerca de 60% dos usuários agora executam seu SO em modo escuro por padrão, e um favicon escuro sobre escuro (um logo preto em uma barra de aba cinza escuro) desaparece visualmente. A correção é um favicon SVG com uma media query: <link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: dark)"> emparelhado com um padrão de modo claro. Dentro do SVG você pode usar CSS para trocar cores de preenchimento com base na mesma media query. Isso requer o formato SVG porque PNG não suporta media queries. Navegadores que não entendem a sintaxe voltam ao <link rel="icon"> padrão, então você mantém cobertura completa sem sobrecarga HTML extra.

Navegadores colocam favicons em cache agressivamente, frequentemente por uma a quatro semanas, às vezes mais. Chrome armazena favicons em seu banco de dados de Favicon sem data de expiração explícita. Safari os armazena por sessão e entre reinicializações. Firefox faz cache com base em headers de cache HTTP padrão. Se você atualizar seu favicon e usuários ainda veem o antigo uma semana depois, o cache é a causa. Três correções funcionam de forma confiável. Primeiro, acrescente uma string de consulta de versão à URL do favicon (href="/favicon.ico?v=2026"), que navegadores tratam como um recurso diferente. Segundo, mude o nome do arquivo completamente (favicon-v2.ico) e atualize a tag de link. Terceiro, configure headers Cache-Control explícitos na resposta do favicon com um max-age curto. Independentemente da rota que você escolher, execute um teste de favicon após deploy para confirmar que o novo arquivo está sendo servido da origem.

Um favicon não afeta diretamente as classificações do Google, mas afeta a taxa de cliques a partir dos resultados de pesquisa, que o Google usa como um sinal indireto de qualidade. Google Search mostra favicons ao lado de resultados orgânicos em mobile (desde 2019) e desktop (desde 2020). Páginas com um favicon claro e com marca recebem mensuradamente CTR mais alto do que páginas com favicon faltando ou padrão. Um estudo SEO de 2023 de 100.000 SERPs encontrou uma elevação de CTR de 4-8% para resultados com favicons com marca em comparação com aqueles sem. Além de CTR, um favicon faltando ou quebrado sinaliza um site de baixa qualidade ou abandonado para usuários, prejudicando confiança e engajamento. Google requer que o favicon tenha pelo menos 8x8 pixels, múltiplo de 8 e rastejável de uma URL estável para exibi-lo nos resultados de pesquisa.

Sim. Este verificador de favicon aceita qualquer URL pública e busca o HTML no servidor, para que você possa auditar seu próprio site, um concorrente ou qualquer design de referência. Cole a URL com o protocolo incluído (https://example.com), clique em Verificar favicons e a ferramenta retorna todos os ícones declarados em dois ou três segundos. A verificação funciona em qualquer página, não apenas na página inicial. Se um site usar favicons diferentes em subdomínios ou seções, teste a URL específica que você se importa. A ferramenta trata redirecionamentos, segue a URL final e relata qualquer 404 em arquivos de ícone. Use-o para avaliar como sites líderes em sua indústria configuram seus favicons antes de projetar o seu, depois copie os padrões que se sustentam em desktop e mobile.

/favicon.ico é o caminho de fallback legado. Navegadores o solicitam automaticamente da raiz do domínio se nenhum outro ícone for declarado no HTML. O formato é ICO, um contêiner Windows que mantém múltiplas resoluções em um arquivo. <link rel="icon"> é a declaração HTML moderna. Aponta para qualquer arquivo de ícone (PNG, SVG ou ICO) em qualquer URL com atributos sizes e type opcionais. Navegadores preferem <link rel="icon"> quando presente e apenas voltam a /favicon.ico se estiver faltando ou retornar 404. A melhor prática é enviar ambos. Declare ícones PNG e SVG modernos via <link rel="icon"> para abas e mantenha um ICO multi-resolução em /favicon.ico para navegadores antigos, leitores RSS e crawlers que apenas verificam o caminho raiz.

Três verificações confirmam um favicon funcionando. Primeiro, execute um verificador de favicon na URL da página para verificar se cada declaração está presente, dimensionada corretamente e retorna 200. Segundo, atualize a página com força no seu navegador (Cmd+Shift+R ou Ctrl+Shift+F5) para contornar cache, depois olhe para a aba. Terceiro, salve a página na sua tela inicial do iOS e tela inicial do Android em um dispositivo real para confirmar que esses ícones renderizam corretamente. Ferramentas dev do navegador também ajudam. Abra a guia Network, filtre por "favicon" e recarregue para ver quais arquivos de ícone o navegador realmente solicitou. Se você ver 404s, corrija os caminhos e faça redeploy. Use o teste de favicon em cada deploy para detectar regressões antes dos usuários, especialmente após atualizações de framework que mudem caminhos de ativos estáticos.

O melhor verificador de favicon é aquele que audita todas as seis declarações, não apenas /favicon.ico. Deve buscar a página no servidor, analisar cada tag de link, validar que cada URL de ícone retorna 200, relatar tamanho de arquivo e dimensões reais, agrupar resultados por dispositivo de destino (desktop, iOS, Android, Safari fixado) e sinalizar variantes faltando. Deve também verificar o conteúdo do manifest.json, não apenas se o manifest está vinculado. Este verificador de favicon cobre todas as seis verificações em uma única passagem e retorna resultados em menos de três segundos. Ferramentas dev do navegador funcionam para verificações pontuais, mas exigem inspeção manual de cada tag de link. Validadores online que apenas verificam /favicon.ico perdem as variantes modernas inteiramente. Execute uma auditoria completa antes do lançamento e após cada migração de ativos estáticos para manter o conjunto de ícones limpo.