O que é um favicon?
Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com cerca de 16×16 pixels que ficam guardados num site para visualização pelo browser. Este pequeno icon aparece sempre do lado esquerdo do endereço web do site que se acedeu.
Em alguns browsers como o Internet Explorer até a versão 6, os favicons não aparecem na barra de URL, só se tornam visíveis quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem ou favicon do site a que se acedeu. Actualmente todos os browsers, Firefox, Opera, Safari, Camino, Netscape e Internet Explorer 7, os favicons aparecem sem qualquer problema e podem ser encontrados também nas abas (mais conhecidas por tabs) além da barra de endereço e dos nossos bookmarks.
Os favicons além de fornecer um valor estético e identificar de forma conveniente um site ( exemplo Apple, com a maça) do ponto de vista da acessibilidade é muito importante também, pois auxilia o utilizador a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Na maioria dos casos os favicons são imagens simplificadas do logotipo da marca que representam.
Na ausência de um favicon, os browsers exibem seu próprio ícone ou um ícone padrão como uma folha em branco. Actualmente a grande maioria dos sites já disponibiliza o seu favicon personalizado.
Existem pela internet muitos geradores online que nos permitem criar o nosso favicon a partir de uma imagem.
Como utilizar o favicon no nosso site?
Depois de o ter gerado e guardado no seu computador, a essa imagem deve dar-lhe o nome de favicon.ico, isto é muito importante, caso dê outro nome ou mude a extensão ele não vai funcionar.
O processo habitual para começar a usar o favicon no seu site é fazendo o upload para o servidor onde tem alojado o seu site, este deve ficar no directório principal, também conhecido por “root directory”, do espaço público do seu site ( normalmente conhecido como public_html).
Para alguns browsers o upload do favicon para este directório é suficiente, embora o aconselhado seja adicionar duas pequenas linhas de código na secção head do seu ficheiro de index.
O código a inserir é o que está escrito abaixo, deve evidentemente substituir a parte http://exemplo.com/ pelo endereço pelo qual se acede ao seu site.<link rel=”icon” href=”http://exemplo.com/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”http://exemplo.com/favicon.ico” type=”image/x-icon”>
(onde http://exemplo.com/favicon.ico é o caminho para o seu favicon)
Geradores Online
* http://www.chami.com/html-kit/services/favicon/
* http://www.dagondesign.com/tools/favicon-generator-tool/
Se desejar subscreva a nossa feed RSS. Obrigado pela sua visita!
Março 1st, 2008 at 8:57 pm
Pessoal, eu estou tentando inserir um favicon no meu site usando o dreamweaver, já olhei e segui dicas de muitos fóruns mas ainda não consegui! Por favor me ajudem! Eu criei um favicon sem problemas em um site, fiz dowload do arquivo favicon.ico na pasta raiz do meu site, inseri entre as tags head, tudo certinho. Meu site ainda não está hospedado em um servidor, mas eu fiquei sabendo que mesmo com hospedagem local, o meu site deve apresentar o ícone com a logo q crie no meu navegador. Meu navegador é o IE 7 e ele apresenta todos os favicons automaticamente sem problemas em todo site por aí… menos o meu! Alguém consegue me ajudar?
Obrigado.
Caetano
Março 2nd, 2008 at 8:01 pm
Pelo que diz, realmente fez tudo bem feito. Queria alertar para o facto dos navegadores não actualizarem o favicon (alguns), e como você pode ter acedido ao seu site anteriormente então é o que pode estar a ocorrer.
Abra o seu site no Firefox ou Opera e veja se mostra o favicon.