Favicon

Favicon, o que é e para que serve?

A palavra favicon origina de duas palavras em inglês: favorite e icon. Podemos encontrar estes ícones nos navegadores na aba ao lado da barra de endereço. 
A sua função é a identificação rápida de um site, fazendo parte integral do branding.


1 - FORMATOS:

  .ICO

Mais utilizado por ser compatível com a maioria dos navegadores. Com programas como o “ICOBundle” é possível ter imagens de diferentes tamanhos no mesmo ficheiro ICO.

  .PNG

Tem maior qualidade mas para apresentar imagens de diferentes tamanhos é necessário declarar no HTML cada uma das imagens. Não é apresentado no IE 9.

2 - PROGRAMAS:

Para abrir ficheiros ICO, podemos utilizar um destes programas gratuitos ou converter imagens em ficheiros ICO através de programas online.

Programas de edição	Programas de conversão
Inkscape	http://www.genfavicon.com/pt/
GIMP	https://www.icoconverter.com/

3 - TAMANHO:

Nos dias de hoje a grande maioria dos navegadores utiliza a versão 32px. Ainda temos outros tamanhos para o Tile do Windows, Apple Touch e IOS.

·         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

4 - COMO IMPLEMENTAR:
Para implementar múltiplos tamanhos e formatos vai ser necessário declarar no HTML e convém declarar os comentários adicionais.

Para utilizar os comentários adicionais fazemos da seguinte forma:

<!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->
<link rel="icon" href="favicon.png">

Para incluir diferentes tamanhos em formato .png temos que realizar várias declarações.

<link rel="icon" href="favicon-16.png" sizes="16x16">

<link rel="icon" href="favicon-32.png" sizes="32x32">

<link rel="icon" href="favicon-48.png" sizes="48x48">

<link rel="icon" href="favicon-64.png" sizes="64x64">

<link rel="icon" href="favicon-128.png" sizes="128x128">

5 - WINDOWS TILES:

No Windows 8, os blocos coloridos da interface Metro chamados Tiles, podem ser utilizados para salvar páginas favoritas com um tamanho de 144px.

Para criar uma imagem Tile para o seu site basta utilizar um PNG quadrado de 144px. Depois é só indicar o caminho da imagem da seguinte forma:

<meta name="msapplication-TileImage" content="tile.png"/>

<meta name="msapplication-TileColor" content="#FF0000"/>

6 - APPLE TOUCH ICONS E IOS:

Para dispositivos que utilizam o sistema iOS (iPhone, iPod e iPad) temos a possibilidade de fixar qualquer site como um favorito diretamente na tela inicial.

Devemos criar 4 imagens quadradas em formato .png nos tamanhos 57px, 72px, 114px e 144px. 

Depois é só atribuir o prefixo “apple-touch-icon” e colocar na raíz do diretório.

<!-- iPad com Retina Display -->

<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">

 CONCLUSÃO: 

Com a variedade de ecrãs existentes, um ícone projetado para cada um poderá fazer toda a diferença para ganhar destaque na barra de favoritos ou área de trabalho conseguindo assim captar mais visitas.