Um favicon (favorites icon) é uma pequena imagem que, nos browsers modernos, se associa ao nosso website (podem ver em baixo um exemplo). Uma imagem deste tipo, além de favorecer a estética do website, dá uma imagem mais profissional do mesmo. Tudo o que é necessário é acesso ao FTP e uma imagem/símbolo que se possa associar ao website pretendido. Ainda existem imensos websites na internet que não possuem um favicon, mas esse é um erro que eu não quero que vocês, os leitores, cometam!
Antes de mais, escolham uma imagem ou um símbolo que se possa associar ao vosso website. Se em vez de uma imagem ou de um símbolo preferirem uma sigla, também é possível, mas como o favicon é algo muito pequeno, recomendo que não o façam. Após edição da imagem, guardem num formato jpeg ou gif com todos os lados iguais (por exemplo 250×250 ou 340×340). O importante é formar um quadrado.
Para passar a imagem do formato guardado para icon existem várias alternativas. Existem alternativas a nível de software, mas já muitos webmasters facilitaram o trabalho de outros webmasters ao criar um website que faz essa conversão. Deixo em baixo uma lista por ordem de preferência.
Já não utilizo os últimos dois há bastante tempo, preferindo portanto o primeiro, que além de ser o mais simples é o que mais me atrai.
Agora que já temos a imagem no formato ico (icon), já podemos proceder à colocação do código na página. Esta é a parte mais simples, sendo apenas necessária a edição das páginas em que querem colocar o favicon. O favicon tem de ser colocado entre as tags:
<head> </head>
Entre as tags especificadas anteriormente (procurem no vosso código onde elas se encontram, mas como diz respeito ao cabeçalho deve estar no topo), colocar o seguinte código:
<link rel=”shortcut icon” href=”http://www.favicon.co.uk/favicon.ico” />
<link rel=”icon” href=”http://www.favicon.co.uk/favicon.ico” />
E é só. Após a colocação deste código no código fonte da página, o icon já deve ser visível!
Popularity: 100% [?]
Janeiro 2nd, 2009 em 16:46
Boa tarde,exelente postagen!!
Novembro 15th, 2010 em 12:00
Até que enfim achei algo que resolve. Otima dica, excelente. Parabéns pelo artigo.
Janeiro 20th, 2011 em 10:32
eu já vi várias postagens assim e já tenho o código mais eu não acho as tags no meu blog.eu posso colocar em outro canto?aonde?me responda por email
Fevereiro 8th, 2011 em 13:19
Muito bom o Tutorial Vlw.
Março 27th, 2011 em 3:06
Lembrando que dá para fazer com arquivos .png sem ter que converter para .ico =D
Ótimo post =D
Julho 29th, 2011 em 12:37
Muito bom mesmo!
Pessoas como vcs que colaboram para nossa cibercultura
Novembro 16th, 2011 em 19:48
Não sei porquê aqui só aparece no IE8. Firefox 8.0 não aparece nada. MAs o ícone deste site aparece normal. Fiz exatamente como indicado, mas devo ser azarado demais…hehehe – brincadeirinha. Alguém sabe lá que diabo acontece para eu incluir este código no head certinho, o de voc~es cunfar e o meu não? rsrs
Novembro 17th, 2011 em 13:25
Um modo muito simples que utilizo é renomear a imagem em favicon.ico e jogar na pasta principal do site pelo ftp sempre funciona.