Favicon para Vue.js
Os aplicativos Vue enviam ativos estáticos de /public (Vite) ou /public (Vue CLI). Coloque favicon.ico lá e referencie-o em index.html - o servidor de desenvolvimento e a construção de produção o veiculam na raiz do site.
Observação: coloque favicon.ico em /public/favicon.ico. Adicione <link rel="icon" href="/favicon.ico"> em index.html dentro de <head>.
Para compilações com hash, /favicon.ico no nível raiz não obtém um hash de conteúdo – ideal para solicitações de navegador estáveis.
A CLI Vue usa a mesma convenção public/. Substitua o padrão public/favicon.ico pelo seu arquivo de vários tamanhos.
Adicione links PNG e apple-touch-icon para dispositivos móveis. Mantenha os caminhos absolutos (/apple-touch-icon.png) para que o modo de histórico do vue-router não quebre as rotas aninhadas.
Ao implantar no Netlify ou Vercel, certifique-se de que os arquivos favicon estejam incluídos na saída dist - eles são copiados de público/automaticamente.
Para vite-plugin-pwa, declare ícones na seção de manifesto de vite.config.ts — entradas 192×192 e 512×512 PNG.
Como funciona
- 1
Copiar ícones para público/
favicon.ico, apple-touch-icon.png, opcional favicon.svg.
- 2
Editar index.html
Adicione as tags <link rel="icon"> e apple-touch-icon.
- 3
Construir e implantar
Confirme que /favicon.ico retorna 200 em produção.
Experimente agora
Gerar ativos de favicon Vue
Gerador de FaviconPerguntas frequentes
Por que o servidor de desenvolvimento Vue mostra o logotipo Vite?+
Substitua public/favicon.ico e reinicie o servidor de desenvolvimento.
Para onde vão os favicons SVG em Vue?+
public/favicon.svg mais <link rel="icon" type="image/svg+xml" href="/favicon.svg"> em index.html.
O vue-router afeta os caminhos do favicon?+
Somente se você usar hrefs relativos - sempre use root-relative / paths.