FavIcons
Publicado por: Luciana Costa em: outubro 11, 2009
Olá pessoas,
Um lindo domingo de sol… e aproveitando pra dar uma adiantada nos projetos (antes do final do ano).
Estou construindo um e-commerce e agora a pouco terminei de criar o FavIcon do site.
Nunca ouviu falar neste termo?
Vamos entender a aprender a criá-lo. [;)]
Definição:
Favicons são pequenos ícones que ficam na barra de endereço do browser 
quando um determinado site é visitado, hoje em dia praticamente todos os sites possuem favicons, abaixo podemos ver alguns favicons bem conhecidos.
Descrição: Como criar um pequeno logo para seu site que aparece na barra de endereços de seu navegados, mais conhecido como favicon.
Vamos ver como criar um destes para seu site, caso você não tenha site ou não mexa com web este tutorial não terá muita utilidade, principalmente porque iremos citar alguns trechos de código html mais a frente.
01. Pressione Ctrl+N para criar um novo arquivo, defina um tamanho de 64×64 pixels (mais adiante iremos diminuir seu tamanho para 16×16 pixels) e 72 dpi´s e pressione Ok, abra uma foto qualquer (no caso o logo que você queira como favicon) pressione Ctrl+A, e depois Ctrl+C, volte ao documento do favicon e pressione Ctrl+V, depois pressione Ctrl+T para abrir a caixa de Free Transform e redimensione a figura para o tamanho do documento, clique em uma das pontas e arraste segurando o Shift para manter a proporção.
02. Agora pressione Ctrl+Alt+I ou vá em Image> Image Size e diminua o tamanho para 16×16 pixels, para salvar seu favicon pressione Ctrl+Shift+S ou vá em File> Save As… e salve no formato .JPG porém na caixa de saída dê o nome de favicon.ico , pois a extensão .ico é lida pelo browser e só assim o favicon irá aparecer.
Agora faça o upload do favicon para o diretório raiz de seu site (deixe o favicon no mesmo diretoria de sua página index) e na sua página index inclua este trecho de código entre as tags [head] e [/head] (trocando [] por <>).
[link rel="Shortcut Icon" href="/favicon.ico"] trocando [] por <>
Depois que isso for feito faça o teste entrando em seu site, caso seu favicon não apareça experimente dar um refresh na página ou colocar um ‘?’ no final da url isto faz com que o browser pense que a página carregada é uma página nova forçando ele a baixar todo o conteúdo da página novamente.
Alguns problemas comuns
No Internet Explorer IE 6 o favicon não aparece enquando a página não for incluída no favoritos e no Safari para Mac ele não aparece até que se limpe o cache do browser.
Deixe uma resposta
Siga-me os Bons!! TWITTER
