Você reparou na presença de um ícone à esquerda do URL na barra de endereços do seu navegador em certos sites web ?
Para implementar esse tipo de ícone no seu próprio site não há nada mais simples.
Criar o favicon
Existem vários métodos :
Para a maioria dos navegadores
Em primeiro lugar, criar uma imagem no formato png ou gif (formatos padrão a serem usados).
(também podemos usar formatos mais raros, veja o link no final da página).
Você também pode escolher dimensões diversas, 16x16 ou 32x32 (em pixels).
Para o Internet Explorer
Como sempre, o IE não respeita os padrões e não utiliza as imagens com o formato correto.
Para este navegador, usar uma imagem ou formato ico (ou BMP rebatizado) (não-padrão, evitar !), e dimensões 16x16 pixels.
Para criar um favicon animado ou apenas um arquivo ICO
Esta ferramenta te ajudará a criar facilmente um arquivo ICO , assim como animar seu favicon e desfilar o texto desejado.
Clique no botão
Percorrer... e escolha uma imagem do seu computador.
Você também pode adicionar o texto que aparecerá depois do ícone, o que criará, automaticamente, um ícone animado.
Finalmente, também é possível gerar um ícone animado sem texto marcando a casa Animated Favicon: é o favicon mesmo que parecerá estar desfilando.
Valide e clique no botão
Generate Favicon.ico
Você terá uma visão geral do seu favicon.
Agora, só precisa baixar o arquivo zipado no seu computador.
Depois de descompactar o arquivo baixado, copiar o arquivo favicon.ico no seu site.
Se você baixou um ícone animado, o arquivo ZIP também vai ter uma pasta extra com o seu favicon animado ; copiar, então, animated_favion1.gif no seu site.
Por o favicon on-line
Em seguida, você deverá por o favicon no seu site e, indicar o caminho a partir da baliza link nas balizas do topo “head”.
Veja o exemplo com uma imagem com o formato png :
<link rel="icon" type="image/png" href="/images/mafavicon.png" />
Conforme o formato, é o atributo "tipo" que muda :
- Formato png : image/png
- Formato gif : image/gif
- Formato jpeg (extensão jpg ou jpeg) : imagem/jpeg
Se você tem um ícone que não respeita os padrões, o atributo "rel" também muda :
<link rel = "shortcut icon" type = "image / x-icon" href = "/ images / icone_ie. ico "/> </ code> . Também é possível por um arquivo favicon.ico na raíz do site para que alguns navegadores o usem automaticamente, mas isso não é padrão.
Se seu ícone é animado (GIF)
Insira a seguinte baliza:
<code><link rel="icon" href="/images/animated_favicon1.gif" type="image/gif">
Observações
- Se você usar um ícone com formato padrão e, um outro, com formato ICO, evite colocar este último na raíz : os navegadores só irão exibí-lo se não encontrarem a imagem PNG.
Veja
Explicação e método, em detalhes :
tutorial favicon
Favicon.ico - Logo do site na barra de endereço
Favicon
Artigo
original publicado por
Jeff
Como barrar um endereço no meu hotmail