7

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

#HTML #CSS
Anna Maria
Anna Maria

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

1
162

Comentários (2)

0
Leandro Carvalho

Leandro Carvalho

01/10/2021 11:43

Dicas incríveis Anna. Obrigado por ter compartilhado com agente.

0
T

Thiago

29/12/2020 21:49

Parabéns pelas suas postagens Anna, bem legal, continue assim.


Apenas para agregar, o favicon não necessariamente precisa ser no formato .ico, ele é mais utilizado para manter compatibilidade com browser muito antigos.


E ao utilizar o ícone no formato .ico o ideal é fazer da seguinte forma:


<link rel="shortcut icon" type="image/x-icon" href="./images/icon.ico">


A única alteração foi no type, essa alteração pode fazer diferença dependendo do browser.


Na documentação do W3 consta como exemplo o uso de png por exemplo.

https://www.w3.org/2005/10/howto-favicon


Exemplo de uso pelo Youtube:

<link rel="shortcut icon" href="https://www.youtube.com/s/desktop/d743f786/img/favicon.ico" type="image/x-icon"> <!-- Compatibilidade com Browser muito antigos-->
<link rel="icon" href="https://www.youtube.com/s/desktop/d743f786/img/favicon_32.png" sizes="32x32">

Desenvolvedora Front-End | JavaScript | CSS | HTML

Brasil