Website

Como adicionar Favicon no site

adicionar-Favicon-site-hostinger

A maioria dos sites online tem seus próprios logotipos específicos e na maioria dos casos, eles são usados como favicons. Se você não sabe o que é favicon, aqui está um exemplo visual:

add favicon1

Ter um favicon em seu site é, naturalmente, muito melhor do que ver um ícone de documento em branco no navegador, além disso, seu site vai parecer muito mais profissional.

Neste tutorial, vamos aprender algumas maneiras fáceis sobre como adicionar um favicon ao seu site.

O que você precisa?

Antes de começar este guia, você precisará do seguinte:

  • Uma imagem quadrada que você gostaria de adicionar como favicon ao seu site;
  • Acesso aos arquivos do seu site.

Opção 1 – Permitir que o navegador automaticamente obtenha o seu favicon (sem necessidade de alterar o código do site)

A maioria dos navegadores detecta automaticamente o arquivo favicon.ico localizado no diretório do seu site e o define como o favicon do seu site. Esta é a maneira mais fácil de adicionar um favicon ao seu site.

  1. Primeiro de tudo, você deve ter uma imagem quadrada dimensionada em qualquer formato de imagem (jpg, bmp, gif, png) para que ele apareça normalmente em navegadores. É claro que imagens não quadradas também funcionam, no entanto, esses ícones podem não parecer profissionais.
  2. Esta opção requer a conversão da imagem para o formato .ico. Existem muitas ferramentas online para fazer exatamente isso, no entanto, neste tutorial, vamos usar convertico.com.
  3. Ao abrir o convertico.com você verá um botão para selecionar e fazer upload do arquivo de imagem.
    add favicon2
  4. Clique no botão e selecione a imagem que você gosta e logo após a sua imagem será convertida automaticamente e aparecerá no lado direito do site para download:add favicon3
  5. Faça o download da imagem clicando no botão de seta Download e salve o arquivo .ico em qualquer lugar do computador.
  6. Agora renomeie o arquivo para favicon.ico, porque o navegador só reconhecerá esse nome automaticamente.
  7. A última etapa é fazer o upload deste arquivo para o diretório do host onde seus arquivos do site estão localizados. Para fazer o upload, você pode usar o Gerenciador de Arquivos ou um cliente FTP. Em Linux baseado hosts o diretório é geralmente public_html no entanto, pode diferir de acordo com sua própria configuração ou o host que você está hospedando o site. Neste caso, melhor consultar com o provedor de hospedagem.

Quando o seu arquivo favicon.ico é carregado juntamente com o resto dos arquivos do seu site, o navegador irá coletá-lo automaticamente e mostrar a imagem no navegador

add favicon4

IMPORTANTE: Se você não puder ver o novo favicon, limpe o cache do seu navegador e reinicie-o.

Opção 2 – Usando uma imagem regular e especificando-a no código do site

Se você acha que a conversão de sua imagem para outro formato é muito de um aborrecimento, você pode certamente usar uma imagem regular como um favicon do seu site.

  1. Primeiro de tudo, você deve ter uma imagem quadrada dimensionada em qualquer formato de imagem (jpg, bmp, gif, png) para que ele apareça normalmente em navegadores. É claro que imagens não quadradas também funcionam, no entanto, esses ícones podem não parecer profissionais.
  2. Carregue este arquivo para o diretório do host onde seus arquivos do site estão localizados. Em Linux baseado hosts o diretório é geralmente public_html no entanto, pode diferir de acordo com sua própria configuração ou o host que você está hospedando o site. Neste caso, melhor consultar com o provedor de hospedagem.
  3. Agora você precisará especificar a imagem que você gostaria de usar como favicon no código do seu site. Adicione esta linha entre as tags <head></head> no código do seu site:

IMPORTANTE: Onde type="image/png" altere a parte png para o formato de sua imagem e altere favicon.png para o seu nome de arquivo.

O código HTML será semelhante a este agora:

add favicon5

Sua imagem agora deve ser mostrada como o favicon do site.

add favicon4 1

IMPORTANTE: Se você não puder ver o novo favicon, limpe o cache do seu navegador e reinicie-o.

Conclusão

Você aprendeu 2 maneiras de adicionar um favicon em seu site. Este é um trabalho pequeno em seu processo do desenvolvimento do Site mas é completamente essencial fazer seu seu site ainda mais confortável e personalizado para seus visitantes.

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$6
99
/mês

Junte-se a centenas de inscritos em todo o mundo

e receba um resumo dos tutoriais mais recentes direto para o seu e-mail

Please wait...

Obrigado por se inscrever!