Neste artigo você vai aprender a como mudar o favicon dinamicamente com JavaScript , ou seja, alterar o favicon que fica na barra de sites do navegador
Fala programdaor(a), beleza? Bora aprender mais sobre JavaScript!
O favicon é o ícone que fica nas abas do navegador, ele geralmente identifica um site e tem uma imagem parecida com o logo da empresa
Com JavaScript é possível alterar o favicon, basta acessá-lo e fazer a mudança na fonte da imagem
Veja o código necessário:
document.querySelector("link[rel='shortcut icon']").href = "newfavicon.ico";
document.querySelector("link[rel*='icon']").href = "newfavicon.ico";
No código acima estamos selecionando os elementos que correspondem ao favicon
Note que você vai precisar ter a imagem disponível em seu site, se você utilizar desta maneira
Outra sugestão é utilizar um link onde a imagem esteja hospedada, por exemplo:
document.querySelector("link[rel*='icon']").href = "https://www.horadecodar.com.br/icons/favicon.ico";
O código acima funciona também, e é uma opção caso a imagem não esteja no seu servidor
Legal, não acha? 🙂
Conclusão
No artigo de hoje você aprendeu a mudar o favicon dinamicamente com JavaScript
Utilizamos o querySelector para selecionar o elemento de HTML que representa o favicon
Depois alteramos a fonte da imagem, mudando assim o favicon
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!
Me salvou aqui!
showww!