Configuração de favicon no Next.js: gere favicon.ico a partir de SVG

Um único favicon.ico basta para um lançamento básico. Mas se você quer renderização estável em abas do navegador, tela inicial do iOS, instalações PWA e resultados do Google Search, vale publicar um conjunto completo de ícones.

Este guia segue um fluxo prático: definir os arquivos necessários, gerá-los a partir de SVG e integrá-los ao Next.js.

Quais arquivos de ícone você realmente precisa

Uma configuração mínima sólida inclui estes arquivos:

favicon.ico (fallback de compatibilidade)
icon.svg ou icon.png (navegadores modernos)
apple-icon.png (ícone da tela inicial no iOS)
manifest (metadados do PWA)
icon-192.png (tamanho do manifest)
icon-512.png (tamanho do manifest)

Fluxo prático: de SVG para conjunto de favicon

1. Comece com um SVG legível em tamanhos pequenos

Favicons costumam ser renderizados em 16x16 e 32x32. Por isso, otimize o SVG de origem para esses tamanhos:

Mantenha a forma principal e remova detalhes muito pequenos.
Use alto contraste.
Evite strokes finos demais.

Faça uma prévia rápida no SVG Viewer.

2. Gere o `favicon.ico`

Use SVG para ICO:

Faça upload do SVG
Selecione tamanhos comuns (16/32/48/64)
Exporte um único arquivo .ico

Essa é uma das capacidades mais úteis de um site de ferramentas SVG: produção rápida de favicon a partir de SVG.

3. Gere `icon-192.png` e `icon-512.png`

Use SVG para PNG e exporte:

icon-192.png
icon-512.png

Se necessário, exporte também um apple-icon.png dedicado (geralmente 180x180).

4. Opcional: otimize antes de publicar

Passe os arquivos de origem por SVG Optimizer ou SVG Minify para obter saídas mais limpas e leves.

Integração com Next.js App Router

Estrutura recomendada:

app/
  favicon.ico
  icon.svg
  apple-icon.png
  manifest.ts
public/
  icon-192.png
  icon-512.png

Exemplo de app/manifest.ts:

import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "SVGView",
    short_name: "SVGView",
    description: "Online SVG tools for viewing, optimizing, and converting SVG files.",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#ffffff",
    icons: [
      {
        src: "/icon-192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/icon-512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  };
}

Verificações de favicon no Google antes do lançamento

Isto é validação de implementação, não copywriting:

https://your-domain.com/favicon.ico retorna 200
Os caminhos dos ícones não estão bloqueados por robots.txt
O favicon é quadrado e tem pelo menos 8x8
Prefira tamanhos múltiplos de 48
O HTML da homepage inclui a declaração do ícone (rel="icon")

Com isso no lugar, as atualizações de favicon no Google Search normalmente aparecem após o novo crawl.

Se seu app usa TanStack Start (como este projeto)

Use os mesmos arquivos e declare os links no <head> raiz:

<head>
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="apple-touch-icon" href="/apple-icon.png" />
  <link rel="manifest" href="/manifest.webmanifest" />
</head>

FAQ

`favicon.ico` sozinho é suficiente?

Ele basta para um lançamento básico, mas não cobre todas as plataformas.

Por que o Google ainda mostra meu favicon antigo?

Normalmente é atraso de crawl/cache. Primeiro valide a acessibilidade da URL e depois aguarde o recrawl.

Devo escolher `icon.svg` ou `favicon.ico`?

Na prática, você costuma manter os dois: fallback em .ico e versão moderna em svg/png.

Configuração de favicon no Next.js: gere favicon.ico a partir de SVG