Como mudar o favicon dinamicamente com JavaScript

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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

474 aulas
20 projetos
39h 27min

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!