Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RTaveira

Ícone no endereço do site

Por , em Desenvolvimento frontend

Recommended Posts

RTaveira    0

RTaveira
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

tomwp    0

tomwp
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leo Paes    0

Leo Paes
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aislan Rafael    0

Aislan Rafael
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Testinha    0

Testinha
Postado

Eu não estou conseguindo colokar img com transparencia...eu salvei em .png mas abre com fundo...nao tem jeito =//

 

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

é 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) Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

cecilia_mlima    0

cecilia_mlima
Postado

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/" name="topFrame" scrolling="NO" noresize>

<frame src="http://www.site.com.br/" name="mainFrame">

</frameset>

<noframes>

<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">

</script>

</body>

</noframes>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Zoide    0

Zoide
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

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. Imagem Postada

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito