Como adicionar favicon ao site HTML?

Adicione a tag no do HTML. Coloque o arquivo na raiz do site.

geral

Gerar favicon: como criar ícone do site e dúvidas

Aprenda a gerar favicon de forma fácil e rápida para deixar seu site profissional e reconhecível em qualquer navegador.

Compartilhar: Facebook X / Twitter WhatsApp

Vídeo: Gerar favicon: como criar ícone do site e dúvidas

Um favicon é um ícone pequeno que representa seu site na aba do navegador, bookmarks e atalhos. Ajuda na identidade visual do site.

Compartilhar esta resposta: WhatsApp X

Ele melhora a identificação do site, aumenta o profissionalismo e facilita o reconhecimento em resultados de busca e dispositivos.

Compartilhar esta resposta: WhatsApp X

Use ferramentas online gratuitas: envie uma imagem, ajuste o tamanho e baixe o arquivo .ico pronto para o site.

Compartilhar esta resposta: WhatsApp X

O padrão é 16x16 pixels para .ico, mas recomendo 32x32 ou múltiplos tamanhos para melhor compatibilidade em dispositivos.

Compartilhar esta resposta: WhatsApp X

Os mais comuns são .ico, .png e .gif. O .ico é o mais compatível com navegadores antigos.

Compartilhar esta resposta: WhatsApp X

Sim, use geradores online para redimensionar e converter imagens JPG, PNG ou SVG em favicon otimizado.

Compartilhar esta resposta: WhatsApp X

Adicione a tag <link rel='shortcut icon' href='favicon.ico'> no <head> do HTML. Coloque o arquivo na raiz do site.

Compartilhar esta resposta: WhatsApp X

Sim, a maioria suporta .ico e .png. Teste em Chrome, Firefox e Safari para compatibilidade total.

Compartilhar esta resposta: WhatsApp X

O .ico suporta múltiplos tamanhos em um arquivo e é mais compatível. PNG é moderno, mas use para dispositivos atuais.

Compartilhar esta resposta: WhatsApp X

Favicon.io, RealFaviconGenerator e Canva são ótimas opções gratuitas e fáceis de usar.

Compartilhar esta resposta: WhatsApp X

Crie apple-touch-icon de 180x180 pixels em PNG e adicione a tag <link rel='apple-touch-icon' href='...'> no HTML.

Compartilhar esta resposta: WhatsApp X

É uma versão em PNG do ícone, suportada por navegadores modernos, com transparência e qualidade alta.

Compartilhar esta resposta: WhatsApp X

Sim, para compatibilidade: 16x16, 32x32 e 48x48. Geradores criam um .ico com todos.

Compartilhar esta resposta: WhatsApp X

Limpe o cache do navegador, recarregue o site e verifique na aba. Teste em diferentes dispositivos.

Compartilhar esta resposta: WhatsApp X

Caminho errado no HTML, arquivo não na raiz ou tamanho inadequado. Sempre verifique o console de erros.

Compartilhar esta resposta: WhatsApp X

Indiretamente sim, pois melhora a experiência do usuário e taxa de cliques em resultados de busca.

Compartilhar esta resposta: WhatsApp X

Sim, usando .gif ou .ico animado, mas suporte varia. Prefira estático para compatibilidade ampla.

Compartilhar esta resposta: WhatsApp X

Use imagens próprias ou livres de royalties. Evite cópias de marcas registradas para não violar leis.

Compartilhar esta resposta: WhatsApp X

Substitua o arquivo antigo pelo novo na raiz e adicione ?v=1 no href para forçar o update no navegador.

Compartilhar esta resposta: WhatsApp X

O logo é a marca principal do site, maior e visível na página. Favicon é uma versão simplificada e pequena dele.

Compartilhar esta resposta: WhatsApp X

Gostou? Compartilhe este conjunto!

Facebook WhatsApp

Todos os Conjuntos Início

Gerenciar Cookies