Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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">](http://www.seusite.com.br/favicon.ico%22)**
- 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">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.
Valew cara isso eu tava precisando aprender.Abraços.
o icone só aparece no IE6 se você tiver adicionado há páginas aos favoritos e reiniciar o navegador
ae vai sem problemas ;)
Gostei desse tuto...tbm tava atras disso..bem interessante!..
obrigado!
>
o icone só aparece no IE6 se você tiver adicionado há páginas aos favoritos e reiniciar o navegador
ae vai sem problemas ;)
mais uma vez o silver dando apoio a galera!vlw pela dica tbm silver!
Abraços - Tom http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Muito Bom!
Olá galera tive o mesmo dilema, onde estava no codigo fonte a linha de comando para mostra o favicon.ico, até ai sem problemas, porém quando abria o site no internet explorer não aparecia o icone, mais no firefox sem problemas... e o mais importante como consegui resolver o problema ?!?!?!?!?!
Somente fui na seguinte configuração do Internet Explorer:
Ferramentas --> Opções da Internet --> Aba Segurança --> Nível Personalizado --> e habilitar todos Plug-ins e controles Activex.
E pronto resolvido o problema.
Falowss
Boa ideia porem gravar nos favoritos o site é melhor pois o se vocÊ fizer um site é melhor indicar para uma pessoa
adicionar teu site a favoritos do que falar para ela habiliatar todos os plug-ins não é mesmo?
falow
>
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)Bom na verdade, isso não está "totalmente certo". O Internet Explorer 6 não interpreta esse tipo de icone, "nomeado" apartir de uma gambiarra, porque até ai, eu posso tb pegar um arquivo .DOC , renomear para .ICO e querer que ele apareça como favicon.
Eu acabei percebendo que na verdade, o ícone não aparece pq o tipo MIME do arquivo é que está errado. Afinal você não está usando um icone mesmo, e sim uma imagem transformada em icone. O mesmo vale para cursores.
Então, o correto mesmo, seria editar um ICONE de verdade... usa um programinha simples, 1mb~2mb que gere a extensão correta .ICO
Eu peguei esse (desculpa, perdi o link do superdownloads, ai hospedei no meu ftp):
http://www.cenasordidas.hbe.com.br/IconeFacil.zip
E pronto, problema resolvido, editando teu icone num editor com essa finalidade. Assim, o icone do site aparece SEMPRE no IE6, sem essa necessidade de adicionar aos favoritos.
Olá Amigos,
Obrigado pela dica "RTaveira", inseri o código e funcionou bem legal a unica coisa que fiz foi utilizar o programa que o "tiu uiLL" indicou e funcionou bem no site que estou criando tanto no FF como no IE. A única coisa foi que no IE adicionei como favorito e tive que fechar o navegador e abrir de novo para ele reconhecer o ico, mas no resto funcionou legal.
Abraços e até mais pessoal.
>
Olá Amigos,
Obrigado pela dica "RTaveira", inseri o código e funcionou bem legal a unica coisa que fiz foi utilizar o programa que o "tiu uiLL" indicou e funcionou bem no site que estou criando tanto no FF como no IE. A única coisa foi que no IE adicionei como favorito e tive que fechar o navegador e abrir de novo para ele reconhecer o ico, mas no resto funcionou legal.
Abraços e até mais pessoal.
Bem se você tive-se lido meu poste:
>
o icone só aparece no IE6 se você tiver adicionado há páginas aos favoritos e reiniciar o navegador
ae vai sem problemas
bem que bom que conseguiu
Eu não estou conseguindo colokar img com transparencia...eu salvei em .png mas abre com fundo...nao tem jeito =//
Abraços!
é por que a imagem é 256 e bmp, portanto não suporta transparencia, recomendo usar o fundo branco pois a barra de endereço não tem outra cor a não ser branco (eu acho) /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/wink.gif&key=0566fd943552bcff9cb1b879403ca34b5ff8f67befaac7fe4648006e9f764689" alt="Imagem Postada" />
Olá pessoal, preciso de uma ajuda de vocês. Uso mascaramento em alguns sites meu (pra ficar sempre aparecendo www.site.com.br ao invés de aparecer o caminho real do site). Estou usando o código abaixo, mas no IE o favicon não aparece de maneira alguma. Alguéem tem alguma sugestão?
<html>
<head>
<title>Site</title>
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
</head>
<frameset rows="0,*" frameborder="NO" border="0" framespacing="0">
<frame "[http://www.site.com.br/"](http://www.site.com.br/) name="topFrame" scrolling="NO" noresize>
<frame src="[http://www.site.com.br/"](http://www.site.com.br/) name="mainFrame">
</frameset>
<noframes>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">
</script>
</body>
</noframes>
</html>cecilia_mlima temos regras: http://forum.imasters.com.br/index.php?act=Help LEIA
Obrigado pela atenção
O meu não deu certo...
Ele esta hospedado em plesk... e fica o logotipo deles, então queria alterar isso...
Eu usei o programa que foi citado... criei um icone... mandei pra pasta raiz... coloquei o codigo na html, mas mesmo assim ainda ta o simbolo da plesk...
Alguem pode me ajudar?
Obrigado!
Amigo nesse caso acredito que eles devam "url rewrite", talvez por isso você não consiga alterar, seu dominio é gratuito ou é subdominio?
No firefox tambem fica o icone deles?
Ponha o link de sua página em um novo tópico na area de duvidas do forum. Especificando o problema. /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/wink.gif&key=0566fd943552bcff9cb1b879403ca34b5ff8f67befaac7fe4648006e9f764689" alt="Imagem Postada" />
abraço
muito bom!