Personalize seu site com seu logo

Aprenda a adicionar um ícone personalizado à aba do seu site em poucos passos. Veja também porque você deve usar e como fazer um favicon antes.

Inicie Agora!

O que é um favicon?

São pequenas imagens que aparecem na aba do navegador ao lado título da página. O termo vem da junção de duas palavras em inglês: favorite e icon. São Normalmente usados logos, nos sites de empresas.

Descubra como esse pequeno ícone pode fazer grande diferença na identidade do seu site.

Por que usar um favicon?

Identidade visua; Facilita a navegação; Melhora a experiência do usuário; Aumenta o engajamento; Otimiza o SEO.

O favicon é um pequeno detalhe que pode fazer uma grande diferença no seu site.

Como criar um favicon?

Crie seu próprio favicon!

Aprenda a criar um favicon usando ferramentas online ou software de edição de imagem.

Escolhendo o formato certo

Qual formato usar? Descubra os formatos de imagem mais adequados para favicons e qual é o tamanho ideal.

O tamanho de imagem geralmente usado é de 30px por 30px, e os formatos mais recomendados são GIF ou PNG.

Preparando o código

Hora de codar! Veja como inserir o código HTML para adicionar o favicon ao seu site. Obs.: Insirá esse código entre os sinais de menor e maior.

link rel="icon" type="image/png" href="http://diretoaoponto-tech.com.br/icon-target.png"/

Inserindo o código no seu site

Colocando o código em prática! Descubra onde inserir o código HTML no seu arquivo header.html.

Insira a tag informada anteriormente entre as tags e do seu site. Ou seja no cabeçalho.

Visualizando o resultado

Veja seu site com o novo ícone!

Atualize seu site e admire o resultado!

Dicas extras

Dicas para um favicon perfeito! ✨ Aprenda dicas extras para otimizar seu favicon e deixá-lo ainda mais profissional.

Veja também mais dicas de uso de ícones no HTML.

Deixe sua marca na internet!

Agora você sabe como personalizar seu site com um favicon! Compartilhe este conteúdo com seus amigos e se inscreva no site para receber as novas atualizações.

Um pequeno detalhe que faz toda a diferença!