Jump to content
Fórum Script Brasil
  • 0
Sign in to follow this  
Strous

Ìcone No Endereço Do Site

Question

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 <head>;

<link rel="shortcut icon" HREF="http://www.seusite.com.br/favicon.ico">

- As tag <head></head> (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:

<html>
<head>
<link rel="shortcut icon" HREF="http://www.seusite.com.br/favicon.ico">
</head>
<body>
<h4>Adicione meu site nos seus favoritos</h4>
</body>
</html>

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.

Créditos: luisx

PS.: Esse tutorial, meu amigo me mostrou em outro fórum, vi que tem muita gente precisando, e coloquei aqui, não sei o link da fonte original, se possuirem, poste aqui.

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Guest
This topic is now closed to further replies.
Sign in to follow this  



  • Forum Statistics

    • Total Topics
      148507
    • Total Posts
      644177
×
×
  • Create New...