Icones nos favoritos passo a passo!

Olá pessoal,


já publicada neste site uma matéria com o mesmo objetivo, porém nos
comentários surgiram muitas dúvidas, então resolvi fazer esse
passo-a-passo para essa função.


Vamos direto ao assunto:


1º Passo: Definir a imagem que vai ser o ícone


1) Selecione a imagem que você deseja que seja o ícone (geralmente é o logotipo do site);

- No meu exemplo vou usar o nome fictício logotipo.jpg


2) Abra a imagem no programa de edição favorito e reduza ela para o tamanho 16x16 ou 32x32 (pixels) e salve;

- Geralmente funciona com qualquer imagem, porém para não arriscar
com os browsers e sistemas operacionais alternativos, use um desses
tamanhos.


2º Passo: Transformando em ícone


3) No programa Paint do Windows, abra o arquivo logotipo.jg;

- Nesta momento, o arquivo já está 32x32 pixels, então é só salvar


4) Vá em Salvar como... e coloque as seguites comfigurações: (nessa ordem)

Salvar com tipo: Bitmap de 256 cores (*.bmp, *dib)

Nome do arquivo: favicon.ico (sim o paint salva ele com o nome que você quiser)

Botão Salvar


OBS: Os itens 2, 3 e 4 podem ser feitos no mesmo programa de edição,
porém alguns programas sempre adicionam por conta própria a extensão
(gif, jpg, bmp)


3º Passo: O ícone na pasta correta


5) Coloque o arquivo na raiz do seu site;

- Raiz do site é a pasta onde está o index.html do seu site, as vezes também é conhecido como Root.

- No servidor, geralmente a raiz é a primeira pasta que aparece no
ftp, eu digo geralmente, porque alguns dominios oferecem outros recursos
além da hospedagem então a raiz do site vira a pasta public_html


- A maioria dos navegadores (Firefox, Mozilla, Opera, Netscape e às
vezes o Internet Explorer), aceita nativamente este arquivo, sem nenhuma
outra informação, apenas bastando ele estar no mesmo diretório que o index.html da página.


- Mas quem usa templates, frames (iframes, frameset) e outros pode não funcionar direito, então para suprir essa situação, vamos incluir um código na págima


4º Passo: Código para refernciar o ícone aos navegadores


6) No arquivo desejado (geralmente o index.html) inclua o código abaixo dentro das tags ;

1. 
   
   

- As tag (cabeçalho) definem muitas
configurações da página, por esse motivo que o código deve ser colocado
entre elas, conforme o exemplo abaixo:


Exemplo:

1. 
   
   
2. 
   
   
3. 
   
   
4. 
   
   
5. 
   
   
6. 
   

   Adicione meu site nos seus favoritos

   
   
7. 
   
   
8. 
   
   

OBS: Lembro a todos que nem sempre o ícone favorito funciona com o
Interner Explorer, mas em todos os testes com firefox, mozzila e outros,
funcionou sem apresentar qualquer problema.


É isso pessoal, qualquer dúvida é só perguntar