Favicon ToolsVerificarCriar
Astro · Not showing

Favicon do Astro não aparece? Veja a correção

O Astro copia public/ para a saída intacto, mas nunca injeta as tags do ícone por você. Uma aba em branco significa que o link não está no layout que suas páginas usam, ou que uma página renderizou seu próprio elemento html e pulou o layout.

public/ mantém os nomes, mas nada linka por você

Arquivos em public/ são copiados para a raiz da saída literalmente, então /favicon.svg ou /favicon.ico é uma URL real. Mas o Astro não varre public/ e injeta tags. Tudo o que você quer no head precisa ser escrito em um componente de layout no qual suas páginas se envolvem.

O detalhe são as páginas que pulam o layout. Um 404 customizado ou uma landing page pontual que escreve seu próprio elemento html não tem tags de ícone a menos que você as adicione ali também.

Encontre a lacuna

  1. 1

    Abra /favicon.ico (ou /favicon.svg) diretamente

    Um 404 significa que o arquivo não está em public/. Se carregar, o arquivo está bom e o problema é a tag de link faltando.

  2. 2

    Verifique se o layout renderiza o link

    Veja o código-fonte de uma página normal. A ausência de uma tag rel=icon significa que o seu Layout.astro não a inclui. Adicione as tags de link ao head do layout.

  3. 3

    Verifique as páginas que pulam o layout

    404s customizados e páginas avulsas que escrevem seu próprio html não herdam o head do layout. Adicione as tags do ícone ali também, ou envolva-as no layout.

Favicon do Astro não aparece: perguntas frequentes

Por que meu favicon do Astro não aparece?

O Astro não injeta tags de ícone, então ou o seu layout não renderiza o link ou a página em questão pula o layout. Confirme que o arquivo carrega na sua URL, depois verifique se o head do layout realmente contém as tags rel=icon.

Preciso adicionar as tags em toda página?

Apenas no layout no qual suas páginas se envolvem. O detalhe são as páginas que não fazem isso: um 404 customizado ou uma landing page que escreve seu próprio elemento html precisa das tags adicionadas diretamente.

Meu site está em um sub-caminho e os ícones dão 404.

Defina base no astro.config.mjs, mas o Astro não reescreve caminhos fixos na sua própria marcação. Prefixe os hrefs com import.meta.env.BASE_URL e confira o HTML gerado antes de fazer deploy.

Keep going