Ainda preciso de favicon.ico em 2025?

Um guia prático sobre favicon.ico em 2025. Navegadores modernos não exigem o arquivo, mas incluí-lo evita ruído nos logs do servidor e mantém compatibilidade com ferramentas antigas.

A resposta curta

Na prática técnica, os navegadores modernos (Chrome, Edge, Safari, Firefox) não exigem mais o arquivo .ico. Mesmo assim, no dia a dia, é fortemente recomendado mantê-lo.

Sem favicon.ico, os logs do servidor enchem de 404. Muitos bots antigos e leitores de RSS não leem o head do HTML — pedem /favicon.ico direto na raiz.

A configuração recomendada em 2025

Três ou quatro arquivos cobrem os casos reais. Não é preciso gerar dezenas de tamanhos em formatos antigos:

1. favicon.ico (32×32) – compatibilidade antiga e fallback

Deve ficar no diretório raiz do site (/favicon.ico)
Serve sobretudo para evitar erros de log e atender ferramentas antigas

2. icon.svg – padrão atual (principal)

Preferido pelos navegadores modernos
Escala sem perda de qualidade

3. apple-touch-icon.png (180×180) – dispositivos iOS

Usado quando a pessoa toca em "Add to Home Screen" no iPhone/iPad
Não precisa de vários tamanhos — 180×180 cobre os dispositivos iOS

4. manifest.webmanifest (opcional)

Principalmente para Android e instalação de PWA
Define ícones PNG 192×192 e 512×512

Código de implementação (HTML / Nuxt Head)

A abordagem mais curta e atual:

<head>
  <!-- 1. Modern SVG (highest priority) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <!-- 2. Apple iOS icon -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- 3. Traditional .ico (fallback) -->
  <!-- Note: Adding sizes="any" tells Chrome this is a bitmap, -->
  <!-- so Chrome will prefer SVG over ICO -->
  <link rel="icon" href="/favicon.ico" sizes="any">
  
  <!-- 4. Android/PWA configuration -->
  <link rel="manifest" href="/manifest.webmanifest">
</head>

Em projetos Nuxt.js

Em nuxt.config.ts ou no componente da página:

useHead({
  link: [
    { rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' },
    { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
    { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
    { rel: 'manifest', href: '/manifest.webmanifest' },
  ],
})

Por que manter favicon.ico?

Logs do servidor limpos

Sem favicon.ico, os logs enchem de 404. Cada vez que um bot, crawler ou leitor de RSS pede /favicon.ico (o que acontece sozinho), entra um erro. Esse ruído dificulta achar problemas de verdade.

Compatibilidade com ferramentas antigas

Muitas ferramentas antigas, leitores de RSS, gerenciadores de favoritos e extensões ainda esperam favicon.ico na raiz. Navegadores modernos não precisam dele, mas essas ferramentas muitas vezes não leem o head do HTML e pedem o caminho raiz direto.

Custo quase zero, benefício alto

Um favicon.ico 32×32 é pequeno (em geral menos de 2KB) e não pede manutenção. Logs limpos e compatibilidade ampla valem bem esse custo mínimo.

A abordagem atual: SVG primeiro

Mantenha favicon.ico por compatibilidade, mas o favicon principal deve ser SVG:

Independente de resolução: Fica nítido em qualquer tamanho, de 16×16 a 512×512
Arquivo menor: Muitas vezes menor do que PNGs equivalentes
À prova de futuro: Funciona bem em telas de alta DPI e em dispositivos que ainda vão aparecer
Um único arquivo: Um SVG substitui vários tamanhos de PNG

Navegadores modernos (Chrome, Firefox, Safari, Edge) aceitam favicon SVG. O atributo sizes="any" no link do ICO faz o navegador preferir o SVG quando ele existe.

Pontos principais

Não apague o .ico: Mesmo que o navegador não o use, deixe-o na raiz para manter os logs limpos e atender ferramentas antigas.
SVG é o caminho: Um único arquivo SVG resolve a maior parte dos problemas de resolução.
Configuração mínima: Com 3–4 arquivos (favicon.ico, icon.svg, apple-touch-icon.png e, se quiser, manifest.webmanifest), você cobre os casos reais.
A ordem importa: Liste o SVG primeiro e o ICO com sizes="any" para o navegador moderno escolher o melhor formato.

Conclusão

Em 2025, o favicon.ico não é exigência técnica dos navegadores modernos, mas mantê-lo continua sendo boa prática. Evita ruído nos logs, cobre ferramentas antigas e praticamente não custa nada. Junto de um favicon SVG, essa é a configuração mais equilibrada para o padrão atual e o que vem depois.

O ponto é a simplicidade: um SVG como ícone principal, um ICO pequeno para compatibilidade, um Apple touch icon para iOS e, se precisar, um manifest para PWA. Essa base cobre os casos reais sem gerenciar dezenas de tamanhos.