Anna Maria
Anna Maria17/12/2020 17:15
Compartilhe
Curso CSS Developer
Recomendado para vocêFormação CSS Web Developer

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

  • #HTML
  • #CSS

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

Compartilhe
Recomendado para você
  • Curso JavaScript Developer
  • Curso HTML Developer
  • Curso UX Designer
Comentários (4)
Renata Sousa
Renata Sousa - 12/04/2022 21:58

Obrigada Anna. Seu artigo me ajudou bastante. Já compartilhei com os amigos, pois é bem detalhado sem ser um texto longo, do tipo direto ao ponto. Até a próxima

Timóteo Bentes
Timóteo Bentes - 03/02/2022 17:26

Ótima dica Anna!! Estava pesquisando sobre isso e graças ao seu artigo, consegui.

Obrigado e sucesso!!!!

Leandro Carvalho
Leandro Carvalho - 01/10/2021 11:43

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

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
Recomendado para vocêCurso CSS Developer