01/07/2015

Seu site tem FAVICON?





TEMA: Favicon
ARTIGO: Revisado e Melhorado

VERSÃO: WA4  | WARC

O  que é?


Resumidamente Favicon , palavra derivada de favorito e ícone são pequenas imagens no formato *.ico que ficam guardadas no seu site para serem visualizados pelos browsers, Cada qual possui sua característica própria para a visualização dos mesmos. Variando da versão do Browser.

Na ausência de um Favicon os navegadores (browsers) exibem um ícone padrão como por exemplo uma folha em branco. 

Para os que desconhecem ou não estão assimilando o que é um Favicon é uma imagem conforme se mostra na figura abaixo do lado do nome do site. Neste exemplo aquela figura do B dentro de um quadradinho Laranja é o Favicon do Blogger.







Para que serve?


Os Favicons geralmente representam uma determinada ação, uma sinalização e ou transmitir uma mensagem. Você não precisa por exemplo saber um determinado idioma para saber quando não é permitido fumar em um local sinalizado. 

Favicon é parte integrante de branding. Ele serve para representar um website e sua entidade dentro de um browser. Um site sem Favicon perde um pouco de sua credibilidade comparado aos outros que utilizam. Causa uma impressão que o desenvolvedor não é um profissional.




Quais os formatos? 


Geralmente PNG e ICO. Eu prefiro PNG devido as medidas e o tamanho em KB do arquivo ser irrisório, a qualidade do PNG é melhor.

JPG, por exemplo, não é adequado devido a pixelização das imagens e a falta de um canal de transparência. O GIF tem uma qualidade inferior e ainda não encontrei quem é o cidadão que acha uma boa ideia utilizar APNG (uma espécie de PNG animado).

Uma opção promissora é o SVG. Como o SVG é um arquivo vetor não teriamos que nos preocupar com os diversos tamanhos. Mas até agora só Opera e o Google Chrome suportam. 


TAMANHOS:


Os clássicos tinham 16 x 16 px, Mas hoje grande parte dos browser utilizam uma versão de 32 px. Portanto em vista dos dispositivos móveis hoje já geram uma complicação nas variedade de tamanhos:

– 16px: Barra de endereço, abas e favoritos da maior parte dos navegadores.
– 24px: Barra de ferramentas do Internet Explorer 9
– 32px: Nova aba no IE, site fixo na barra de tarefas do Windos 7 e sidebar do Safari
– 57px:iPhone sem tela retina e iPod Touch
– 72px: iPad sem tela retina
– 96px: GoogleTV
– 114px: iPhone com tela retina
– 128px: Chrome Web Store
– 144px: iPad Retina, Windows 8 Tiles
– 256x160px: Opera Speed Dial




E no WebAcappella com inserir um Favicon em um site?


Muito simples:

Comece primeiro utilizando um programa de sua preferência uma imagem que simbolize o seu site (Eu particularmente ainda prefiro criar imagens no tamanho 16 x 16px): 

Então eu criei uma imagem utilizando as medidas de 50 x  50px e exportei em formato png. Portanto na hora de exportar eu defini as medidas para 16 x 16px. Desta forma meu favicon não perde qualidade.

Geralmente quando se exporta um imagem, é informado uma prévia do tamanho do arquivo. Sugiro este tamanho não exceder 20 kb.



Como exemplo criei uma imagem para o  favicon do site www.webacappellashow.com.br



NO WA 4


Com a imagem criada, no WebAcappella vai em SITE>>PROPRIEDADES DO WEBSITE e clique no ícone da catraca na parte superior.



Observe uma região nominada como Favicon:

Agora é simples, clica no botão logo abaixo, localize onde salvou sua imagem criada no pc e clique em OK. Atualize e depois publique.



NO WA RC


Com a imagem criada, n tela principal do seu projeto, clique em Website settings






Na tela que se abrir clique na imagem conforme mostrado na figura abaixo na seção Favicon






Agora é simples, clica no botão logo abaixo, localize onde salvou sua imagem criada no pc e clique em OK. Atualize e depois plubique.






Prontinho, seu site já tem um Favicon.




















3 comentários:

  1. Bonjour,
    Merci pour ce tuto qui m'a aidé.
    Ne pas oublier de dire que la commande Favicon se trouve dans la Maquette de votre site

    ResponderExcluir
  2. parabéns pelo artigo obrigado me ajudou muito.

    ResponderExcluir

Olá pessoas do bem!!! Se gostou do post deixa um comentário. Os comentários é bom para aumentar a estima de quem ta postando. Valeu.

Related Posts Plugin for WordPress, Blogger...