Inserindo Favicon em site ou Blog - Compatibilidade total
18 julho 2010
“Favicons (do Inglês 'favorite' (favorito) + 'icon' (ícone)) são pequenas imagens no formato *.ico com cerca de 16x16 pixels que ficam guardados em um site para visualização pelo navegador.”
Você quer que a imagem ou logo do seu blog ou site apareça na barra de endereços do navegador como um favicon? E ainda tenha compatibilidade total, funcionando em todos os navegadores? Então vamos lá:
- Crie um imagem com 16X16 pixels em programas como Gimp, PhotoShop ou serviços online (ver abaixo);
- Salve esta imagem duas vezes, uma em formato *.ico para ser reconhecida pelo Internet Explorer, e outra em *.png para ser reconhecida em outros navegadores
- Hospede estas imagem em seu servidor, ou serviços online de hospedagem gratuita (ver abaixo);
- Copie o link (endereço url) da imagem que é fornecido pelo site;
- Troque ‘URL_DA_IMAGEM’ pelo link da imagem que você hospedou:
<link href='URL_DA_IMAGEM_ICO' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='apple-touch-icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon' type='image/x-icon'/>
Obs.: Cada linha desse código é para que seu favicon funcione em um navegador diferente, veja:
Linha 1: Para funcionar no Internet Explorer
Linha 2: Para funcionar no Firefox e outros
Linha 3: Para funcionar em Apple Iphone e Ipad
Linha 4: Para funcionar no Google Chrome
No Blogger:
- Copie e cole o código modificado logo após </b:skin> , antes de </head>;
- Salve o modelo e verifique as alterações nos navegadores.
Em Sites:
- Copie e cole o código modificado antes de fechar o cabeçalho </head> no código html;
- Salve o arquivo e verifique as alterações nos navegadores. (**No IE, a página precisa ser aberta apartir de um servidor para funcionar, e não como arquivo local.)
Em Wordpress:
- Abra o header.php do seu tema e insira logo início da tag <head> o código modificado.
- Salve o arquivo e verifique as alterações nos navegadores.
Favicons Grátis
Trate as imagens em:
Hospede as suas imagens nos sites abaixo:
É isso aí. Agora seu favicon é compatível é com todos os navegadores!
Abraço à todos, até o próximo tutorial!
Por: [Matheus]
0 comentários:
Postar um comentário