O QUE É UM FAVICON ?
Em poucas palavras, o favicon é uma imagem pequena que aparece ao lado do endereço do site:
TUTORIAL PASSO-A-PASSO:
A primeira coisa a fazer é criar uma imagem nos tamanhos 16x16 pixeis. Eu neste tutorial vou utilizar o Photoshop, mas você pode utilizar outro programa qualquer.
1º Criar uma imagem no tamanho 16x16 e guarda-la no formato .png,
2º Vá ao site ConvertICO e faça o upload da imagem criada no ponto numero 1,
3º Faça o download da imagem já no formato .ico,
4º Agora que já tem a imagem no seu computador, altere o nome para favicon,
5º Faça o upload do favicon para o seu alojamento ou aloje-o no MerryPic,
6º Vá a head do seu tema (template), entre as tags <head> ... </head> e cole o seguinte código:
<link href='https://www.wptotal.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://www.wptotal.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
(Não se esqueça de alterar o link directo para a imagem)
7º Guarde as alterações e teste no seu browser preferido 🙂
Nota: O favicon pode não aparecer logo. As vezes demora, é da cache do seu browser.
Espero que este artigo lhe tenha útil! Qualquer dúvida deixe um comentário!
Até breve 🙂
Me explica por favor como faço isso no wordpress!!! to me matando aqui e não sei como fazer!! Não sei onde ir no início para copiar em html :/
Priscila, primeiro crie a imagem. Eu sempre uso esse Site: http://www.favicon.co.uk/ gera o favicon nas dimensoes que vc desejar, 16x16 ou 32x32.... e envia para seu servidor, via http://ftp.... por padrao, apenas colocar o favicon dentro da rain do seu site já deve pegar... veja se seu template nao tem opcao de configuracao do favicon, se sim, basta copiar a url da imagem e inserir ... outra opcao é vc usar o codigo acima da postagem... para adicionar esse codigo vc precisa acessar o painel do seu dominio e editar o arquivo mencionado ou entao pelo painel wordpress, em Template - Editor, so que pelo painel WordPress vc precisa dar permissao de escrita no arquivo que vai colar o codigo pq senao nao exibe a opcao de salvar...
único tutorial que obtive resultado, meu blog foi hackeado e a unica coisa que nao voltava ao normal era o favicon dele, os hackers tinham deixado uma bandeira da argelia rsrs, agora esta normal, vlw
Bom tutorial Celso.
Tens ai um erro: TUTU(O)RIAL PASSO-A-PASSO:
Obrigado pelo alerta, já corrigi 🙂
Olá Amigo, no no meu Blog não funcionou, fiz assim:
a imagem ico hospedei no servidor onde tenho a hosdagem do site, dentro da pasta img do meu tema.
Código:
onde errei?
holanda
Se você colocou a imagem dentro da pasta img do seu tema porque não actualizou o endereço da imagem ?
Você está a utilizar este link:
Quando a imagem está neste endereço:
Tem que alterar o endereço da imagem 😉
Olá Celso,
muito obrigado pela atenção e por ter resolvido minha dúvida.
Meu favicon já está funcionando.
Abraços...
Holanda
Otimo tutorial, tava usando usando pluguin de Favicon atoa.
agora ta certo - baixandogratis.net 😉
Olá Amigo, no no meu Blog não funcionou, fiz assim:
a imagem ico hospedei no servidor onde tenho a hosdagem do site
onde errei?
holanda
Se a imagem não aparece é porque não está no seu alojamento.
Estive a ver e se for o site 'guiasetubal', a favicon não é encontrado. Talvez você colocou o favicon num local diferente daquele que colocou no código.
Estava procurando mesmo um bom tutorial para colocar o icone do lado do endereço do site... Parabéns pelo tutorial... Parabéns pelo site!!!
Muito legal..vou tentar num blog q tenho
bjo
Olá Carol,
obrigado pelo comentário 🙂