Favicon do Vue não aparece? Veja a correção
Um componente single-file do Vue não consegue renderizar uma tag de link no head, então o favicon é declarado no index.html: na raiz do projeto no Vite, dentro de public/ no Vue CLI. Uma aba em branco significa que a tag desse arquivo está errada.
Por que não é um componente
O navegador pede o favicon enquanto analisa o head, antes de o Vue montar qualquer coisa. Qualquer coisa que você adicione de dentro do app chega tarde demais, e é por isso que o ícone pertence ao HTML estático.
Onde esse HTML vive depende do scaffold. O create-vue (Vite) mantém o index.html na raiz do projeto e copia public/ para a saída intacto. O Vue CLI mantém o template em public/index.html e o processa com EJS, então as URLs precisam de um placeholder.
Encontre a falha
- 1
Abra /favicon.ico diretamente
Um 404 significa que o arquivo não é servido nesse caminho. Se carregar, o arquivo está bom e o problema é a tag de link ou um cache.
- 2
Confirme em qual scaffold você está
Um index.html na raiz significa Vite: use /favicon.ico. Um template public/index.html significa Vue CLI: use o prefixo <%= BASE_URL %>.
- 3
Não importe o ícone de src
Uma imagem importada é empacotada e hasheada, então /favicon.ico para de resolver. Mantenha os ícones em public/ com os nomes intactos.
Favicon do Vue não aparece: perguntas frequentes
Por que meu favicon do Vue não aparece?
A tag de link no index.html aponta para onde o arquivo não está, ou (no Vue CLI) o placeholder BASE_URL está faltando e o caminho quebra fora da raiz do domínio. Abra /favicon.ico diretamente para ver se o arquivo é servido.
Posso definir o favicon a partir de um componente Vue?
Você pode trocá-lo em tempo de execução com useHead, e o navegador segue a mudança após o carregamento. Mas a primeira requisição usa o que o index.html declarou, então mantenha um padrão real ali.
Por que o favicon sumiu depois que eu o importei?
Importar uma imagem de src a entrega ao bundler, que emite um nome de arquivo com hash. Nada fica então alcançável em /favicon.ico. Coloque o arquivo em public/.