<http://schema.org/articleBody>
"&lt;h2&gt;Favicons&lt;/h2&gt;\r\nSe voc\u00EA ainda n\u00E3o sabe, Favicons s\u00E3o aqueles pequenos \u00EDcones que ficam ao lado da barra de endere\u00E7os de um navegador e servem, entre outras fun\u00E7\u00F5es, para identificar rapidamente um site. Os Favicons s\u00E3o um velhos conhecidos dos designers e desenvolvedores. J\u00E1 s\u00E3o 14 anos de hist\u00F3ria. E neste meio tempo muita coisa evoluiu. Surgiram smartphones, tablets, televisores, sistemas operacionais modernos, telas de alta resolu\u00E7\u00E3o e o favicon foi mudando de tamanho, posi\u00E7\u00E3o e formato, conquistando um espa\u00E7o muito al\u00E9m da barra de ferramentas do navegador. Neste artigo vamos conhecer mais profundamente esta parte t\u00E3o importante, mas muitas vezes t\u00E3o negligenciada, do webdesign.\r\n&lt;blockquote&gt;A fun\u00E7\u00E3o de um favicon n\u00E3o \u00E9 apenas ser, como o nome nos leva a deduzir, um s\u00EDmbolo relacionado aos favoritos. Favicons s\u00E3o parte integrante do branding.&lt;/blockquote&gt;\r\nO primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5. Naqueles idos tempos de 1999 os simp\u00E1ticos \u00EDcones de 16 pixels tinham outras fun\u00E7\u00F5es como estimar o n\u00FAmero de usu\u00E1rios que favoritavam um site com base em requisi\u00E7\u00F5es do \u00EDcone no servidor. Este m\u00E9todo deixou de ter utilidade quando os browsers passaram a exibir favicons tamb\u00E9m na barra de tarefas, independente do site estar salvo nos favoritos ou n\u00E3o. Mas o nome - uma jun\u00E7\u00E3o dos termos favorite e icons - ficou.\r\n&lt;h2&gt;Fun\u00E7\u00E3o&lt;/h2&gt;\r\n\u00CDcones podem ter diversos prop\u00F3sitos como representar uma determinada a\u00E7\u00E3o, superar barreiras de linguagem, sinaliza\u00E7\u00E3o e/ou transmitir uma mensagem. Voc\u00EA n\u00E3o precisa conhecer a l\u00EDngua local em uma esta\u00E7\u00E3o de trem de outro pa\u00EDs para saber onde \u00E9 a sa\u00EDda. A figura de um homem passando por uma porta acompanhada de uma seta \u00E9 suficiente para comunicar esta informa\u00E7\u00E3o. Da mesma forma, portas de banheiro s\u00E3o demarcadas com silhuetas masculinas ou femininas para voc\u00EA n\u00E3o errar na hora do aperto. Estas representa\u00E7\u00F5es imag\u00E9ticas acabam rapidamente se tornando conven\u00E7\u00F5es sociais. N\u00E3o \u00E9 necess\u00E1rio pensar muito para saber qual bot\u00E3o toca ou pausa um aparelho de som ou v\u00EDdeo...\r\n\r\nA fun\u00E7\u00E3o de um favicon n\u00E3o \u00E9 apenas ser, como o nome nos leva a deduzir, um s\u00EDmbolo relacionado aos favoritos. Favicons s\u00E3o parte integrante do branding. Eles servem para representar um website como uma entidade dentro de um browser.\r\n&lt;h2&gt;Design de \u00EDcones&lt;/h2&gt;\r\nCriar um \u00EDcone \u00E9 uma atividade multidisciplinar. Semi\u00F3tica, gestalt, branding e cultura pop s\u00E3o alguns dos assuntos importantes para se ter em mente na hora de projetar \u00EDcones. Pesquisa e bom senso tamb\u00E9m s\u00E3o fundamentais, afinal, um mesmo s\u00EDmbolo pode ter dezenas de significados diferentes de acordo com idade, sexo, nacionalidade, profiss\u00E3o, religi\u00E3o e cultura do p\u00FAblico alvo. Al\u00E9m, \u00E9 claro, do conhecimento t\u00E9cnico necess\u00E1rio para garantir uniformidade, visibilidade, nitidez e identifica\u00E7\u00E3o de uma imagem em tamanhos reduzidos. Este artigo n\u00E3o tem a pretens\u00E3o de ensinar design de \u00EDcones, mas sim fornecer informa\u00E7\u00F5es relevantes para utilizar de maneira mais inteligente os recursos dispon\u00EDveis em diferentes browsers, sistemas operacionais e aparelhos para fazer da iconografia uma ferramenta de divulga\u00E7\u00E3o uma marca.\r\n&lt;blockquote&gt;O primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5.&lt;/blockquote&gt;\r\nSe voc\u00EA precisa de algumas dicas sobre o por que e como criar um \u00EDcone vale a pena ler o livro &lt;a href=\"http://www.fivesimplesteps.com/products/the-icon-handbook\"&gt;The Icon Handbook&lt;/a&gt; por Jon Hicks.\r\n\r\nExistem diversas op\u00E7\u00F5es de ferramentas digitais para a cria\u00E7\u00E3o de \u00EDcones. &lt;a href=\"http://www.telegraphics.com.au/sw/\"&gt;Desde plugins para Photoshop&lt;/a&gt; at\u00E9 alguns softwares exclusivos para este fim. O importante \u00E9 ter o cuidado de repensar o design com mais ou menos detalhes de acordo com o tamanho do \u00EDcone ao inv\u00E9s de simplesmente redimensionar o arquivo. At\u00E9 mesmo redu\u00E7\u00F5es proporcionais podem gerar um resultado distorcido e com baixa nitidez. Como em qualquer outro trabalho, quanto mais tempo e carinho voc\u00EA dedicar para criar o seu \u00EDcone melhor ser\u00E1 o resultado final. Fa\u00E7a o que fizer, passe longe dos conversores autom\u00E1ticos online! O resultado \u00E9 t\u00E3o desastroso quanto um layout WYSIWYG em tabela com gifs animados de gatos tocando teclado.\r\n&lt;h2&gt;Formatos&lt;/h2&gt;\r\n&lt;h4&gt;.ICO&lt;/h4&gt;\r\nEste tipo de arquivo ainda \u00E9 o mais utilizado devido ao grande suporte por parte dos navegadores e pela op\u00E7\u00E3o de conter diversas imagens encapsuladas. Ou seja, em um mesmo arquivo \u00E9 poss\u00EDvel atender diversas fun\u00E7\u00F5es e resolu\u00E7\u00F5es de tela. (E n\u00E3o. Voc\u00EA n\u00E3o vai conseguir isto simplesmente renomeando um .gif ou .png. \u00C9 necess\u00E1rio buscar um software pr\u00F3prio)/ Mas \u00E9 necess\u00E1rio cuidado para que o arquivo final n\u00E3o fique muito pesado. Alguns desenvolvedores recomendam um tamanho m\u00E1ximo de 20K.\r\n&lt;h4&gt;.PNG&lt;/h4&gt;\r\nOs browsers modernos - leia-se todo mundo menos o Internet Explorer - j\u00E1 suportam outras exten\u00E7\u00F5es como PNG, por exemplo. As vantagens do PNG \u00E9 a qualidade maior da imagem, tamanho reduzido e a conveni\u00EAncia na fase de cria\u00E7\u00E3o. \u00C9 bem prov\u00E1vel que voc\u00EA j\u00E1 tenha no seu computador algum software capaz de salvar ou exportar arquivos para este formato. Mas como n\u00E3o \u00E9 poss\u00EDvel incluir diversas resolu\u00E7\u00F5es em um \u00FAnico arquivo \u00E9 necess\u00E1rio declarar manualmente cada uma das resolu\u00E7\u00F5es.\r\n&lt;h4&gt;Outros formatos&lt;/h4&gt;\r\nExiste a possibilidade de uso para alguns outros formatos al\u00E9m de ICO e PNG, mas ainda n\u00E3o existem vantagens consistentes para a ado\u00E7\u00E3o de nenhum. JPG, por exemplo, n\u00E3o \u00E9 adequado devido a pixeliza\u00E7\u00E3o das imagens e a falta de um canal de transpar\u00EAncia. O GIF tem uma qualidade inferior e ainda n\u00E3o encontrei quem \u00E9 o cidad\u00E3o que acha uma boa ideia utilizar APNG (uma esp\u00E9cie de PNG animado).\r\n&lt;blockquote&gt;Como em qualquer outro trabalho, quanto mais tempo e carinho voc\u00EA dedicar para criar o seu \u00EDcone melhor ser\u00E1 o resultado final.&lt;/blockquote&gt;\r\nUma op\u00E7\u00E3o promissora \u00E9 o SVG. Como o SVG \u00E9 um arquivo vetor n\u00E3o teriamos que nos preocupar com os diversos tamanhos. Mas at\u00E9 agora s\u00F3 Opera e o Google Chrome suportam. Ent\u00E3o, como grande parte das novidades interessantes, teremos que esperar os outros browsers para come\u00E7ar a brincar...\r\n\r\nSe voc\u00EA tem curiosidade em saber qual navegador aceita o que a partir de qual vers\u00E3o, esta \u00E9 a tabela de compatibilidade segundo a Wikipedia.\r\n&lt;table&gt;\r\n&lt;tbody&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Browser&lt;/td&gt;\r\n&lt;td&gt;ICO&lt;/td&gt;\r\n&lt;td&gt;PNG&lt;/td&gt;\r\n&lt;td&gt;GIF&lt;/td&gt;\r\n&lt;td&gt;animated GIFs&lt;/td&gt;\r\n&lt;td&gt;JPEG&lt;/td&gt;\r\n&lt;td&gt;APNG&lt;/td&gt;\r\n&lt;td&gt;SVG&lt;/td&gt;\r\n&lt;/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Firefox&lt;/td&gt;\r\n&lt;td&gt;1.0+&lt;/td&gt;\r\n&lt;td&gt;1.0+&lt;/td&gt;\r\n&lt;td&gt;1.0+&lt;/td&gt;\r\n&lt;td&gt;Sim&lt;/td&gt;\r\n&lt;td&gt;Sim&lt;/td&gt;\r\n&lt;td&gt;3.0+&lt;/td&gt;\r\n&lt;td&gt;-&lt;/td&gt;\r\n&lt;/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Chrome&lt;/td&gt;\r\n&lt;td&gt;Sim&lt;/td&gt;\r\n&lt;td&gt;Sim&lt;/td&gt;\r\n&lt;td&gt;4.0+&lt;/td&gt;\r\n&lt;td&gt;4.0+&lt;/td&gt;\r\n&lt;td&gt;4.0+&lt;/td&gt;\r\n&lt;td&gt;-&lt;/td&gt;\r\n&lt;td&gt;Sim&lt;/td&gt;\r\n&lt;/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;IE&lt;/td&gt;\r\n&lt;td&gt;5.0+&lt;/td&gt;\r\n&lt;td&gt;-&lt;/td&gt;\r\n&lt;td&gt;-&lt;/td&gt;\r\n&lt;td&gt;-&lt;/td&gt;\r\n&lt;td&gt;-&lt;/td&gt;\r\n&lt;td&gt;-&lt;/td&gt;\r\n&lt;td&gt;-&lt;/td&gt;\r\n&lt;/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Opera&lt;/td&gt;\r\n&lt;td&gt;7.0+&lt;/td&gt;\r\n&lt;td&gt;7.0+&lt;/td&gt;\r\n&lt;td&gt;7.0+&lt;/td&gt;\r\n&lt;td&gt;7.0+&lt;/td&gt;\r\n&lt;td&gt;7.0+&lt;/td&gt;\r\n&lt;td&gt;9.5+&lt;/td&gt;\r\n&lt;td&gt;9.6+&lt;/td&gt;\r\n&lt;/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Safari&lt;/td&gt;\r\n&lt;td&gt;Sim&lt;/td&gt;\r\n&lt;td&gt;4.0+&lt;/td&gt;\r\n&lt;td&gt;4.0+&lt;/td&gt;\r\n&lt;td&gt;-&lt;/td&gt;\r\n&lt;td&gt;4.0+&lt;/td&gt;\r\n&lt;td&gt;-&lt;/td&gt;\r\n&lt;td&gt;-&lt;/td&gt;\r\n&lt;/tr&gt;\r\n&lt;/tbody&gt;\r\n&lt;/table&gt;\r\nSe quer um conselho amigo passe longe de favicons animados. Al\u00E9m de bregas eles distraem o usu\u00E1rio e passam a impress\u00E3o que voc\u00EA \u00E9 carente por aten\u00E7\u00E3o.\r\n\r\nA melhor pedida \u00E9 utilizar PNG com um fallback em ICO para o Internet Explorer.\r\n&lt;h2&gt;Tamanho&lt;/h2&gt;\r\nAqui come\u00E7a a confus\u00E3o. Os favicons cl\u00E1ssicos tinham 16px quadrados. Mas hoje grande parte dos browsers utilizam uma vers\u00E3o de 32px. Esta \u00E9 a vers\u00E3o padr\u00E3o para a barra de ferramentas do Internet Explorer 10, pro exemplo. \u00CDcones para home screen de dispositivos m\u00F3veis s\u00E3o outro pepino... S\u00F3 o iOS vai ter 4 tamanhos diferentes de acordo com o aparelho e resolu\u00E7\u00E3o de tela. Ainda existem outras coisas para se considerar como tiles do Windows 8 e quadradinhos do Opera Speed Dial e at\u00E9 mesmo Google TV. Segue uma listinha b\u00E1sica de tamanhos:\r\n\r\n&lt;strong&gt;- 16px:&lt;/strong&gt; Barra de endere\u00E7o, abas e favoritos da maior parte dos navegadores.\r\n&lt;strong&gt;- 24px:&lt;/strong&gt; Barra de ferramentas do Internet Explorer 9\r\n&lt;strong&gt;- 32px:&lt;/strong&gt; Nova aba no IE, site fixo na barra de tarefas do Windos 7 e sidebar do Safari &lt;strong&gt;- 57px:&lt;/strong&gt; iPhone sem tela retina e iPod Touch\r\n&lt;strong&gt;- 72px:&lt;/strong&gt; iPad sem tela retina\r\n&lt;strong&gt;- 96px:&lt;/strong&gt; GoogleTV\r\n&lt;strong&gt;- 114px:&lt;/strong&gt; iPhone com tela retina\r\n&lt;strong&gt;- 128px:&lt;/strong&gt; Chrome Web Store\r\n&lt;strong&gt;- 144px:&lt;/strong&gt; iPad Retina, Windows 8 Tiles\r\n&lt;strong&gt;- 256x160px:&lt;/strong&gt; Opera Speed Dial\r\n\r\nParece muita coisa, mas raramente voc\u00EA vai precisar utilizar todos estes tamanhos. Isto vai variar de acordo com as necessidades do p\u00FAblico alvo de cada projeto, que incluem navegador, aparelho e sistema operacional mais utilizados. Minha recomenda\u00E7\u00E3o \u00E9 incluir ao menos o cl\u00E1ssico de 16px, uma vers\u00E3o HD de 32px e os touch icons para iOS. Segundo estat\u00EDsticas da Microsoft um site fixado na barra de tarefas do Windows 7 recebia uma porcentagem de visita de 15% a 50% maior... Segundo esta l\u00F3gica criar um tile para o Windows 8 tamb\u00E9m \u00E9 uma boa pr\u00E1tica, j\u00E1 que as op\u00E7\u00F5es de intera\u00E7\u00E3o se estendem al\u00E9m do navegador.\r\n&lt;h2&gt;Como implementar um favicon&lt;/h2&gt;\r\nEsta \u00E9 simples. Basta deixar um arquivo de nome favicon.ico na pasta ra\u00EDz do servidor. Certo?\r\n\r\nSim e n\u00E3o. Isto funcionaria bem para apenas um arquivo... Mas se voc\u00EA deseja trabalhar com m\u00FAltiplos tamanhos e formatos vai ser necess\u00E1rio declarar no HTML. Vamos supor que temos um arquivo favicon.png dentro de uma pasta chamada IMG.\r\n\r\nAntigamente voc\u00EA provavelmente faria isto da seguinte maneira:\r\n&lt;pre class=\"lang-html\"&gt;&amp;lt;link rel=\"icon\" type=\"image/png\" href=\"img/favicon.png\" /&amp;gt;&lt;/pre&gt;\r\nComo somos bacanas e utilizamos HTML5 as coisas ficam mais simples:\r\n&lt;pre class=\"lang-html\"&gt;&amp;lt;link rel=\"icon\" href=\"img/favicon.png\" /&amp;gt;&lt;/pre&gt;\r\nOkay. Isto funciona para a maior parte dos browsers inteligentes. Falta o fallback para o IE...\r\n\r\nAviso mega Importante! N\u00E3o cometa o erro de declarar o png E o ico sem coment\u00E1rios condicionais. S\u00E9rio. Isto da problemas. Cada navegador possui a sua l\u00F3gica. Uns v\u00E3o ler o primeiro que voc\u00EA declarar, outros o \u00FAltimo, alguns escolhem aleatoriamente... S\u00E9rio! Caos!\r\n\r\nPoder\u00EDamos fazer o fallback atrav\u00E9s de coment\u00E1rios condicionais:\r\n&lt;pre class=\"lang-html\"&gt;&amp;lt;!--[if IE]&amp;gt;&amp;lt;link rel=\"shortcut icon\" href=\"img/favicon.ico\"&amp;gt;&amp;lt;![endif]--&amp;gt;\r\n&amp;lt;link rel=\"icon\" href=\"img/favicon.png\"&amp;gt;&lt;/pre&gt;\r\nPoder\u00EDamos... mas para a Microsoft n\u00E3o basta atrapalhar a vida dos desenvolvedores com os problemas dos navegadores antigos. Ela gosta de criar novos problemas! O IE10 n\u00E3o suporta coment\u00E1rios condicionais. \u00C9 isto mesmo. A salva\u00E7\u00E3o m\u00E1gica para aquelas longas noites insones desenvolvendo n\u00E3o funciona mais. Pode esquecer. Ah, e n\u00E3o sei se voc\u00EA deu uma espiadinha na tabela l\u00E1 em cima, mas tamb\u00E9m n\u00E3o suportam PNG. Legal, n\u00E9? Bem, s\u00E3o estas pequenas coisas que fazem a vida de um desenvolvedor web preocupado com acessibilidade e experi\u00EAncia do usu\u00E1rio um pouco como resolver quebra cabe\u00E7as... Uma solu\u00E7\u00E3o poss\u00EDvel seria declarar apenas o arquivo em PNG e manter o ICO na ra\u00EDz.\r\n&lt;pre class=\"lang-html\"&gt;&amp;lt;link rel=\"icon\" href=\"img/favicon.png\" /&amp;gt;&lt;/pre&gt;\r\nSe voc\u00EA desejar incluir diversos tamanhos, basta declarar cada um deles.\r\n&lt;pre class=\"lang-html\"&gt;&amp;lt;link rel=\"icon\" href=\"favicon-16.png\" sizes=\"16x16\"&amp;gt;\r\n&amp;lt;link rel=\"icon\" href=\"favicon-32.png\" sizes=\"32x32\"&amp;gt;\r\n&amp;lt;link rel=\"icon\" href=\"favicon-48.png\" sizes=\"48x48\"&amp;gt;\r\n&amp;lt;link rel=\"icon\" href=\"favicon-64.png\" sizes=\"64x64\"&amp;gt;\r\n&amp;lt;link rel=\"icon\" href=\"favicon-128.png\" sizes=\"128x128\"&amp;gt;&lt;/pre&gt;\r\n&lt;h2&gt;Apple Touch Icons&lt;/h2&gt;\r\nNo caso de dispositivos que utilizam o sistema iOS (iPhone, iPod e iPad) existe a op\u00E7\u00E3o de fixar qualquer site como um favorito diretamente na tela de inicio, independente da exist\u00EAncia de uma vers\u00E3o mobile ou design responsivo. Por padr\u00E3o uma thumbnail \u00E9 gerada automaticamente a partir de uma screenshot da p\u00E1gina, mas o resultado \u00E9 n\u00E3o apenas visualmente confuso como nada pr\u00E1tico do ponto de vista da r\u00E1pida identifica\u00E7\u00E3o em meio a tantos outros \u00EDcones... Muitas vezes o usu\u00E1rio pode at\u00E9 resolver desafixar o seu site dali por que deixou a tela \"feia\". Criar uma imagem exclusiva, chamada apple touch icon, \u00E9 portanto uma boa pr\u00E1tica de usabilidade.\r\n\r\nPara isto basta criar 4 imagem quadradas com os cantos retos em formato png nos tamanhos 57px, 72px, 114px e 144px. &lt;a href=\"http://appicontemplate.com/\"&gt;Este template de photoshop &lt;/a&gt;\u00A0quebra um galho nesta hora.\r\n\r\nDepois \u00E9 s\u00F3 nomear os arquivos com o prefixo \"apple-touch-icon\" e colocar na ra\u00EDz do diret\u00F3rio. A vantagem disto \u00E9 que voc\u00EA economiza algumas linhas de c\u00F3digo, mas em alguns casos como em um tema para tumblr, por exemplo, n\u00E3o temos acesso a pasta raiz. Nestas horas \u00E9 importante declarar o caminho no HTML. Outra vantagem em apontar o caminho do \u00EDcone no c\u00F3digo \u00E9 a acessibilidade. N\u00E3o importa se o seu usu\u00E1rio \u00E9 fanboy da Apple ou n\u00E3o. Quando devidamente apontados, os touch icons tamb\u00E9m s\u00E3o utilizados pelo Android (a partir da vers\u00E3o 2.2) e em alguns outros aplicativos como o Reeder para iPad.\r\n\r\nBem, prepare seus icones e cole isto aqui entre as tags head do seu HTML e seja feliz:\r\n&lt;pre class=\"lang-html\"&gt;&amp;lt;!-- iPad com Retina Display --&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"apple-touch-icon-144x144.png\"&amp;gt;\r\n&amp;lt;!-- iPhone com Retina Display --&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"apple-touch-icon-114x114.png\"&amp;gt;\r\n&amp;lt;!-- Primeira e segunda gera\u00E7\u00E3o de iPad --&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"apple-touch-icon-72x72.png\"&amp;gt;\r\n&amp;lt;!-- Vers\u00F5es antigas de iPhone, iPod Touch e Android 2.2+ \u00A0--&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" href=\"apple-touch-icon.png\"&amp;gt;&lt;/pre&gt;\r\nVoc\u00EA pode notar que estou declarando as imagens da maior para a menor. Esta \u00E9 uma boa pr\u00E1tica que garante que vers\u00F5es mais antigas do iOS baixem o arquivo de menor tamanho, j\u00E1 que o atributo sizes s\u00F3 foi implantado a partir do iOS 4. Nas vers\u00F5es anteriores por padr\u00E3o o sistema escolhe a \u00FAltima imagem determinada. Ou seja, \u00E9 uma quest\u00E3o de progressive enhancement, pois n\u00E3o faz sentido o usu\u00E1rio baixar uma imagem mais pesada em uma tela de resolu\u00E7\u00E3o mais baixa.\r\n\r\nPor padr\u00E3o o iOS adiciona alguns efeitinhos como cantos arredondados, drop shadow e reflexo. Como nada grita mais web 2.0 do que gelzinhos bregas se voc\u00EA n\u00E3o quiser o reflexo basta utilizar o sufixo \"precomposed\" no nome do seu arquivo.\r\n&lt;pre class=\"lang-html\"&gt;&amp;lt;link rel=\"apple-touch-icon-precomposed\" href=\"apple-touch-icon-precomposed.png\"&amp;gt;&lt;/pre&gt;\r\nSe voc\u00EA for pregui\u00E7oso e s\u00F3 tiver tempo para criar um \u00EDcone fa\u00E7a o de 144px que ele ser\u00E1 redimensionado automaticamente. S\u00F3 tenha em mente que a imagem pode perder a qualidade e voc\u00EA estar\u00E1 for\u00E7ando o usu\u00E1rio a gastar mais banda do que necess\u00E1rio...\r\n&lt;h2&gt;&lt;span style=\"color: #ff0000\"&gt;Atualiza\u00E7\u00E3o - iOS7&lt;/span&gt;&lt;/h2&gt;\r\nCom a implanta\u00E7\u00E3o do iOS7 ocorreram algumas modifica\u00E7\u00F5es no formato Apple Touch Icon. A primeira \u00E9 com rela\u00E7\u00E3o ao layout: a Apple retirou os efeitos de gel e transpar\u00EAncia a l\u00E1 web 2.0 (j\u00E1 foi tarde!), portanto n\u00E3o existem mais as vers\u00F5es \"pre-composed\". Mas a mudan\u00E7a mais significativa ocorreu no tamanho: todos os \u00EDcones para iOS7 est\u00E3o 5% maiores.\r\n\r\nSeguem os tr\u00EAs novos tamanhos:\r\niPhone / iPod touch retina - 120px\r\niPad 2 / iPad mini - 76px\r\niPad retina - 152px\r\n\r\nComo o iOS7 n\u00E3o \u00E9 compat\u00EDvel com vers\u00F5es do iPhone pr\u00E9-retina (iPhone 3GS e anterior) n\u00E3o existe um novo formato para ele. Portanto, \u00E9 recomend\u00E1vel incluir ainda uma vers\u00E3o de 57px para estes aparelhos mais antigos que n\u00E3o tem a possibilidade de atualizar.\r\n\r\nAs meta-tags ficariam assim:\r\n&lt;pre class=\"lang-html\"&gt;&amp;lt;!-- iPad iOS7+ com Retina Display --&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"apple-touch-icon-152x152.png\"&amp;gt;\r\n&amp;lt;!-- iPhone iOS7+ com Retina Display --&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"apple-touch-icon-120x120.png\"&amp;gt;\r\n&amp;lt;!-- iPad iOS7+ sem retina display e iPad Mini--&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"apple-touch-icon-76x76.png\"&amp;gt;\r\n&amp;lt;!-- iPhone iOS7-, iPod Touch e Android 2.2+ \u00A0--&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" href=\"apple-touch-icon.png\"&amp;gt;&lt;/pre&gt;\r\nSe voc\u00EA for um fan\u00E1tico e quiser garantir a absoluta compatibilidade com todos os aparelhos vai precisar incluir todas as vers\u00F5es antigas de \u00EDcones. O c\u00F3digo neste caso seria:\r\n&lt;pre class=\"lang-html\"&gt;&amp;lt;!-- iPad iOS7+ com Retina Display --&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"apple-touch-icon-152x152.png\"&amp;gt;\r\n&amp;lt;!-- iPad iOS7- com Retina Display --&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"apple-touch-icon-144x144.png\"&amp;gt;\r\n&amp;lt;!-- iPhone iOS7+ com Retina Display --&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"apple-touch-icon-120x120.png\"&amp;gt;\r\n&amp;lt;!-- iPhone iOS7- com Retina Display --&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"apple-touch-icon-114x114.png\"&amp;gt;\r\n&amp;lt;!-- iPad iOS7+ sem retina display e iPad Mini--&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"apple-touch-icon-76x76.png\"&amp;gt;\r\n&amp;lt;!-- iPad iOS7- sem retina display  --&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"apple-touch-icon-72x72.png\"&amp;gt;\r\n&amp;lt;!-- iPhone iOS7-, iPod Touch e Android 2.2+ \u00A0--&amp;gt;\r\n&amp;lt;link rel=\"apple-touch-icon\" href=\"apple-touch-icon.png\"&amp;gt;&lt;/pre&gt;\r\n&lt;h2&gt;Windows 8 Tiles&lt;/h2&gt;\r\nSe um usu\u00E1rio gostou o suficiente do seu site para querer guarda-lo entre os seus favoritos um \u00EDcone deve ser um convite implicito para que ele possa voltar a visita-lo novamente. Se este convite \u00E9 grande, colorido e uma presen\u00E7a constante na \u00E1rea de trabalho a probabilidade dele retornar \u00E9 maior ainda, certo?\r\n\r\n\u00C9 o que acontece no Windows 8. Aqueles blocos coloridos de aplicativos da interface Metro, chamados Tiles tamb\u00E9m podem ser utilizados para salvar favoritos.\r\n\r\nO padr\u00E3o do Windows 8 \u00E9 utilizar um favicon ou o \u00EDcone do pr\u00F3prio Internet Explorer quando um site \u00E9 fixado como favoritos na tela inicial. N\u00E3o \u00E9 preciso ser um g\u00EAnio do design para deduzir que se aproveitarmos melhor a \u00E1rea dispon\u00EDvel - 144px quadrados - o resultado seria muito mais bacana.\r\n\r\nPara criar uma image tile para o seu site basta utilizar um PNG quadrado de 144px por 144 pixels. O recomend\u00E1vel \u00E9 utilizar um fundo de arquivo transparente, j\u00E1 que o Windows escolhe automaticamente a cor do fundo com base no tom dominante do seu \u00EDcone. \u00C9 poss\u00EDvel ainda escolher a cor do fundo do tile no pr\u00F3prio c\u00F3digo HTML atrav\u00E9s de valores hexadecimais ou rgb. Depois \u00E9 s\u00F3 apontar o caminho da imagem da seguinte forma:\r\n&lt;pre class=\"lang-html\"&gt;&amp;lt;meta name=\"msapplication-TileImage\" content=\"img/tile.png\"/&amp;gt;\r\n&amp;lt;meta name=\"msapplication-TileColor\" content=\"#FF0000\"/&amp;gt;&lt;/pre&gt;\r\nEsta imagem s\u00F3 \u00E9 baixada no momento que o usu\u00E1rio fixa o site como favorito, ent\u00E3o n\u00E3o existe nenhum custo de banda adicional.\r\n\r\nExistem ainda mais alguns op\u00E7\u00F5es avan\u00E7adas de uso. \u00C9 poss\u00EDvel, por exemplo, criar um arquivo XML que atualiza periodicamente este tile com informa\u00E7\u00F5es do site. \u00C9 \u00F3timo para mostrar os \u00FAltimos posts de um blog, novas promo\u00E7\u00F5es de uma loja ou n\u00FAmero de mensagens n\u00E3o lidas de uma rede social, por exemplo. Isto significa que o usu\u00E1rio receber\u00E1 notifica\u00E7\u00F5es de atualiza\u00E7\u00E3o sem ao menos precisar entrar no site. \u00C9 poss\u00EDvel retornar um valor num\u00E9rico entre 1 e 99 e ainda mostrar alguns s\u00EDmbolos espec\u00EDficos chamados de glyph badges. &lt;a href=\"http://msdn.microsoft.com/en-us/library/windows/apps/br212849.aspx\"&gt;A lista\u00A0de s\u00EDmbolos dispon\u00EDvels inclui um \u00EDcones de mensagem, alerta, aten\u00E7\u00E3o, erro, etc.&lt;/a&gt; &lt;a href=\"http://blogs.msdn.com/b/ie/archive/2012/04/03/pinned-sites-in-windows-8.aspx\"&gt;Este tutorial&lt;/a&gt; ensina como criar o XML\r\n\r\n\u00C9 poss\u00EDvel - na verdade desde o Windows 7 - ainda criar uma &lt;a href=\"http://msdn.microsoft.com/en-us/library/gg491725(v=vs.85).aspx\"&gt;lista de links internos escolhidas pelo desenvolvedor &lt;/a&gt;\u00A0ou &lt;a href=\"http://msdn.microsoft.com/en-us/library/gg491724(v=vs.85).aspx\"&gt;gerada dinamicamente&lt;/a&gt; atrav\u00E9s da intera\u00E7\u00E3o do usu\u00E1rio para que ele visite diretamente atrav\u00E9s da tile.\r\n&lt;h2&gt;Conclus\u00E3o&lt;/h2&gt;\r\nAs vezes s\u00E3o os detalhes que fazem toda a diferen\u00E7a. Criar um \u00EDcone projetado especificamente para melhor atender cada situa\u00E7\u00E3o pode dar um pouquinho a mais de trabalho, mas certamente garante uma melhor integra\u00E7\u00E3o entre o site o usu\u00E1rio final e, consequentemente, uma divulga\u00E7\u00E3o maior da marca. Quem fizer o esfor\u00E7o a mais certamente ser\u00E1 ganhar\u00E1 destaque na barra de favoritos, home screen ou \u00E1rea de trabalho, ganhando assim mais visitas e o principal - clientes e usu\u00E1rios mais felizes.\r\n&lt;h4&gt;Leia mais&lt;/h4&gt;\r\n&lt;a href=\"http://www.jonathantneal.com/blog/understand-the-favicon/\"&gt;Understand the Favicon&lt;/a&gt;\r\n&lt;a href=\"http://www.netmagazine.com/features/create-perfect-favicon\"&gt;Create perfect favicon&lt;/a&gt;\r\n&lt;a href=\"http://www.fivesimplesteps.com/products/the-icon-handbook\"&gt;The icon handbook&lt;/a&gt;\r\n&lt;a href=\"http://mathiasbynens.be/notes/touch-icons\"&gt;Touch Icons&lt;/a&gt;\r\n&lt;a href=\"http://blogs.msdn.com/b/ie/archive/2012/04/03/pinned-sites-in-windows-8.aspx\"&gt;Pinned sites in windows 8&lt;/a&gt;"^^<http://www.w3.org/2001/XMLSchema#string>
<http://tableless.com.br/favicons/>