Favicon para Nuxt
Nuxt fornece arquivos estáticos de /public na raiz do seu site, então /public/favicon.ico se torna /favicon.ico automaticamente. Para ícones de vários tamanhos ou SVG, adicione tags de link via nuxt.config.ts ou useHead() em app.vue.
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Crie seu pacote de favicon com Favicon Generator – exporte favicon.ico, favicon.svg e apple-touch-icon.png de uma fonte 512×512. Coloque-os na pasta /public do seu projeto Nuxt.
Nuxt 3 serve tudo em /public na raiz do domínio sem nenhuma configuração extra. Os navegadores solicitam /favicon.ico por padrão, portanto, colocar o arquivo lá cobre o caso mais comum.
Para controle explícito sobre cada variante de ícone, adicione tags de link em nuxt.config.ts em app.head.link - ou chame useHead({ link: [...] }) em app.vue. Ambas as abordagens injetam tags no <head> de cada página.
Após a implantação, abra seu URL de produção em uma janela privada e execute Favicon Checker para confirmar /favicon.ico e seus caminhos <link rel="icon"> retornam 200. Ícones de desenvolvimento armazenados em cache são um motivo comum pelo qual um favicon Nuxt não é exibido após a implantação.
Se o ícone da guia funcionar, mas Google Search ainda mostrar um favicon em branco, verifique se a sua página inicial ativa vincula um ícone quadrado de pelo menos 48×48. Consulte nosso guia de requisitos de favicon do Google para regras de rastreamento e tamanho.
Nuxt não gera automaticamente arquivos .ico de vários tamanhos — você deve fornecê-los. Use substitutos PNG vinculados em app.head para prompts de instalação PWA e guias de alto DPI.
Como funciona
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Adicionar a /public
Copie favicon.ico (e opcional favicon.svg, apple-touch-icon.png) para sua pasta Nuxt /public.
- 3
Configurar e verificar
Adicione entradas app.head.link em nuxt.config.ts, se necessário, implante e execute Favicon Checker em seu URL ativo.
Experimente agora
Generate a Nuxt-ready favicon
Gerador de FaviconPerguntas frequentes
Como adiciono um favicon em Nuxt 3?+
Coloque favicon.ico em /public e, opcionalmente, adicione tags <link rel="icon"> em nuxt.config.ts em app.head.link ou via useHead() em app.vue.
Para onde vai o favicon em um projeto Nuxt?+
O diretório /public. Os arquivos são veiculados a partir da raiz do seu domínio – /public/favicon.ico está disponível em /favicon.ico.
Por que meu favicon Nuxt não está aparecendo?+
Causas comuns: arquivo fora de /public, caminho errado em app.head, cache do navegador do desenvolvedor ou verificação do host local em vez do URL implantado. Teste em uma janela anônima.
Devo usar nuxt.config.ts ou useHead() para favicons?+
Qualquer um funciona. nuxt.config.ts é melhor para ícones estáticos em todo o site; useHead() em app.vue se os ícones dependerem do estado de tempo de execução ou da lógica por rota.
Posso usar um favicon SVG em Nuxt?+
Sim - coloque favicon.svg em /public e adicione { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } a app.head.link.