Como colocar ícone ou logo do seu site na barra de endereço do navegador

O que é

A maioria dos sites ao serem acessados tem um ícone com a logo da empresa na barra de endereços do navegador. Esse ícone é chamado de Favicon, que é uma imagem com o formato ICO com mais ou menos 16 x 16 pixels.

Como inserir no seu site

1º passo: Escolha uma imagem para usar de ícone(de preferência uma de 16 x 16).

Obs: Caso sua imagem seja muito grande você pode utilizar um software de edição de imagens para redimensiona-la.

2º passo: Como eu falei anteriormente sua imagem precisa estar no formato .ICO.

Tem alguns sites que transformam sua imagem .PNG ( ou outros formatos) em .ICO

Eu gosto de usar o Convertio, porém você pode usar outros.

Link para o Convertio👈

3º passo: Já no site, é só escolher sua imagem, e clicar em converter.

4º passo: Salve a imagem(ja convertida em .ICO) na pasta dos arquivos do seu site.

5º passo: Abra seu editor de código, e na header do seu projeto, adicione o seguinte código:

<link rel="shortcut icon" type="imagex/png" href="./images/icon.ico">

Obs: No href você deve colocar o endereço que o seu ícone está localizado.

6º passo: Atualize seu site com Ctrl + F5, e Pronto!

Espero ter ajudado 💞

Meus artigos anteriores:

Ensinando a ter um servidor e um domínio GRÁTIS com GitHubPages 👈

Sobre funções para manipular arrays 👈

Explicando como usar Arrow Functions 👈

______________________________________________________________________________________

Olá, meu nome é Anna Maria eu sou uma desenvolvedora Front-End.

Me desafiei a postar um ou dois artigos por dia aqui na DIO, com assunto diversos, mas principalmente coisas que eu tive/tenho dificuldade.

Então decidi compartilhar com vocês.

📌Me siga para ver mais artigos

📌 Curta

📌 Comente o que achou

Se ficar com alguma dúvida pode me contatar 📧

✨Discord: imnotannamaria#1935

✨LinkedIn: www.linkedin.com/in/anna-maria-573801191/

✨Email: aannamariabr@outlook.com

_Anna Maria