Como criar o seu proprio favicon

Resolvi publicar éta materia depois de visitar dois sites de amigos meus e tẻ visto que eles utilizam defaults favicons nos seus sites o que era uma tremenda gafe.

O favicon é a abreviação de “Favorites Icon”. Trata-se de ícones personalizados que são exibidos nos favoritos e/ou na barra de endereços dos navegadores (browsers). Veja alguns exemplos de favicons:

O favicon dá um aspecto profissional ao seu site e se torna um meio discreto de fixar sua marca/logotipo na cabeça de seus clientes. Este recurso pode ser usado por qualquer site, desde que o servidor que hospeda este site tenha suporte a este recurso. Um exemplo de favicon é este simbolo identico ao da Volkswagen que esta na barra de endereços deste meu Blog.

Criando o favicon

O favicon pode ser criado facilmente a partir de qualquer editor de imagens (Photoshop, Fireworks, Gimp, etc.). É necessario ter  atenção para as limitações do favicon:

• O tamanho máximo da imagem deve ser de 16 x 16 pixels;
• A imagem deve ter o máximo de 16 cores (cores de 4 bits).

Após criar a imagem, salve-a com o nome de favicon.ico

Configurando o favicon

Após criar e salvar, faça o upload de seu favicon para o diretório raiz do seu site. Logo em seguida, adicione o seguinte código HTML entre as tags do seu site:

<link rel=”shortcut icon” href=”favicon.ico” > <p class=”texto” align=”center”> <a href=”artigos.html” class=”linktexto”>Voltar ao Índice de Artigos</a> </p> </td> </tr> </table></td> <!– FIM DA TABELA DE CONTEÚDO CENTRAL –> </tr> <!– INICIO DO RODAPE –> <tr> <td height=”38″ colspan=”2″ valign=”top”><table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ class=”rodape”> <tr> <td width=”561″ height=”38″ valign=”middle”><div class=”texto_rodape” style=”padding-left: 60px;”></div></td> <td width=”219″ valign=”middle”><div class=”texto_rodape” style=”padding-left: 5px;”>Ilha Web Internet Ltda. © 2006</div></td> </tr> </table></td> </tr> <!– FIM DO RODAPE –> </table> <div align=”center”></div> <map name=”Map”> <area shape=”rect” coords=”686,122,721,142″ href=”index.html” alt=”Página Inicial”> <area shape=”rect” coords=”723,122,768,142″ href=”/suporte” alt=”Suporte Técnico / Contato”> </map> <map name=”popupmenu_r9_c2Map”> <area shape=”rect” coords=”10,1,155,19″ href=”mapadosite.html” alt=”Mapa do Site”> </map> <map name=”popupmenu_r7_c2Map”> <area shape=”rect” coords=”13,1,127,17″ href=”parcerias.html” alt=”Parcerias”> </map> <map name=”popupmenu_r9_c2Map2″> <area shape=”rect” coords=”8,2,132,18″ href=”mapadosite.html” alt=”Mapa do Site”> </map> </body> </html>

E pronto ja esta criado o seu favicon!