Olá! Monday, 09 de December de 2024.
- Códigos
- Assistentes
- Artigos/Dicas
- Widgets
- Serviços
- Expediente
- Parceiros
Adicionar a Meu favorito
Tuesday, 13 de June de 2006
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 <head>;
- 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:
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
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>;
- 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:
Adicione meu site nos seus favoritos
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
Enviar um Artigo
Enviado por: Luis Henrique
Outros artigos
Assine o Feed desta categoria 
- Aprenda como alterar as cores da barra de rolagem em seu site - 23/04/2006
- Tempo de Permanência do visitante em seu site - 25/01/2006
- Colocando um formmail em sua página (sem script) - 06/11/2005
- Interação com Flash e HTML - 04/07/2005
- Ver mais...
Comentários do artigo [Novo comentário]
Matheus Henrique
- 18 de May de 2009 - 00:34
Preciso colocar o codigo html em todas as paginas ou so no index?
Gabriel Barros
- 01 de October de 2009 - 13:41
Não é necessário colocar o favicon no root, pode ser em qualquer diretório. Ah, à propósito, Matheus Henrique, pode ser em todas as páginas sem problemas. Mas como Luis disse, realmente o IE apresenta problemas.
enderson almeida da costa
- 05 de June de 2010 - 14:56
bom
Para adicionar um comentário você deve efetuar o login
 |
CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010 |
