<
Menu

Tableless


Architecture project

CSS3 – Módulo Template Layout

wai-aria

WAI-ARIA – Estendendo o significado das interações

webintents

WebIntents – Framework para WebApps

fonts

Qual unidade utilizar – Pixel, EM ou REM


Imagem post: Favicons

Favicons

Os favicons são pequenos mas indispensáveis. Entenda como eles funcionam e quais as melhores práticas.

Favicons

Se você ainda não sabe, Favicons são aqueles pequenos ícones que ficam ao lado da barra de endereços de um navegador e servem, entre outras funções, para identificar rapidamente um site. Os Favicons são um velhos conhecidos dos designers e desenvolvedores. Já são 14 anos de história. E neste meio tempo muita coisa evoluiu. Surgiram smartphones, tablets, televisores, sistemas operacionais modernos, telas de alta resolução e o favicon foi mudando de tamanho, posição e formato, conquistando um espaço muito além da barra de ferramentas do navegador. Neste artigo vamos conhecer mais profundamente esta parte tão importante, mas muitas vezes tão negligenciada, do webdesign.

A função de um favicon não é apenas ser, como o nome nos leva a deduzir, um símbolo relacionado aos favoritos. Favicons são parte integrante do branding.

O primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5. Naqueles idos tempos de 1999 os simpáticos ícones de 16 pixels tinham outras funções como estimar o número de usuários que favoritavam um site com base em requisições do ícone no servidor. Este método deixou de ter utilidade quando os browsers passaram a exibir favicons também na barra de tarefas, independente do site estar salvo nos favoritos ou não. Mas o nome – uma junção dos termos favorite e icons – ficou.

Função

Ícones podem ter diversos propósitos como representar uma determinada ação, superar barreiras de linguagem, sinalização e/ou transmitir uma mensagem. Você não precisa conhecer a língua local em uma estação de trem de outro país para saber onde é a saída. A figura de um homem passando por uma porta acompanhada de uma seta é suficiente para comunicar esta informação. Da mesma forma, portas de banheiro são demarcadas com silhuetas masculinas ou femininas para você não errar na hora do aperto. Estas representações imagéticas acabam rapidamente se tornando convenções sociais. Não é necessário pensar muito para saber qual botão toca ou pausa um aparelho de som ou vídeo…

A função de um favicon não é apenas ser, como o nome nos leva a deduzir, um símbolo relacionado aos favoritos. Favicons são parte integrante do branding. Eles servem para representar um website como uma entidade dentro de um browser.

Design de ícones

Criar um ícone é uma atividade multidisciplinar. Semiótica, gestalt, branding e cultura pop são alguns dos assuntos importantes para se ter em mente na hora de projetar ícones. Pesquisa e bom senso também são fundamentais, afinal, um mesmo símbolo pode ter dezenas de significados diferentes de acordo com idade, sexo, nacionalidade, profissão, religião e cultura do público alvo. Além, é claro, do conhecimento técnico necessário para garantir uniformidade, visibilidade, nitidez e identificação de uma imagem em tamanhos reduzidos. Este artigo não tem a pretensão de ensinar design de ícones, mas sim fornecer informações relevantes para utilizar de maneira mais inteligente os recursos disponíveis em diferentes browsers, sistemas operacionais e aparelhos para fazer da iconografia uma ferramenta de divulgação uma marca.

O primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5.

Se você precisa de algumas dicas sobre o por que e como criar um ícone vale a pena ler o livro The Icon Handbook por Jon Hicks.

Existem diversas opções de ferramentas digitais para a criação de ícones. Desde plugins para Photoshop até alguns softwares exclusivos para este fim. O importante é ter o cuidado de repensar o design com mais ou menos detalhes de acordo com o tamanho do ícone ao invés de simplesmente redimensionar o arquivo. Até mesmo reduções proporcionais podem gerar um resultado distorcido e com baixa nitidez. Como em qualquer outro trabalho, quanto mais tempo e carinho você dedicar para criar o seu ícone melhor será o resultado final. Faça o que fizer, passe longe dos conversores automáticos online! O resultado é tão desastroso quanto um layout WYSIWYG em tabela com gifs animados de gatos tocando teclado.

Formatos

.ICO

Este tipo de arquivo ainda é o mais utilizado devido ao grande suporte por parte dos navegadores e pela opção de conter diversas imagens encapsuladas. Ou seja, em um mesmo arquivo é possível atender diversas funções e resoluções de tela. (E não. Você não vai conseguir isto simplesmente renomeando um .gif ou .png. É necessário buscar um software próprio)/ Mas é necessário cuidado para que o arquivo final não fique muito pesado. Alguns desenvolvedores recomendam um tamanho máximo de 20K.

.PNG

Os browsers modernos – leia-se todo mundo menos o Internet Explorer – já suportam outras extenções como PNG, por exemplo. As vantagens do PNG é a qualidade maior da imagem, tamanho reduzido e a conveniência na fase de criação. É bem provável que você já tenha no seu computador algum software capaz de salvar ou exportar arquivos para este formato. Mas como não é possível incluir diversas resoluções em um único arquivo é necessário declarar manualmente cada uma das resoluções.

Outros formatos

Existe a possibilidade de uso para alguns outros formatos além de ICO e PNG, mas ainda não existem vantagens consistentes para a adoção de nenhum. 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).

Como em qualquer outro trabalho, quanto mais tempo e carinho você dedicar para criar o seu ícone melhor será o resultado final.

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. Então, como grande parte das novidades interessantes, teremos que esperar os outros browsers para começar a brincar…

Se você tem curiosidade em saber qual navegador aceita o que a partir de qual versão, esta é a tabela de compatibilidade segundo a Wikipedia.

Browser ICO PNG GIF animated GIFs JPEG APNG SVG
Firefox 1.0+ 1.0+ 1.0+ Sim Sim 3.0+ -
Chrome Sim Sim 4.0+ 4.0+ 4.0+ - Sim
IE 5.0+ - - - - - -
Opera 7.0+ 7.0+ 7.0+ 7.0+ 7.0+ 9.5+ 9.6+
Safari Sim 4.0+ 4.0+ - 4.0+ - -

Se quer um conselho amigo passe longe de favicons animados. Além de bregas eles distraem o usuário e passam a impressão que você é carente por atenção.

A melhor pedida é utilizar PNG com um fallback em ICO para o Internet Explorer.

Tamanho

Aqui começa a confusão. Os favicons clássicos tinham 16px quadrados. Mas hoje grande parte dos browsers utilizam uma versão de 32px. Esta é a versão padrão para a barra de ferramentas do Internet Explorer 10, pro exemplo. Ícones para home screen de dispositivos móveis são outro pepino… Só o iOS vai ter 4 tamanhos diferentes de acordo com o aparelho e resolução de tela. Ainda existem outras coisas para se considerar como tiles do Windows 8 e quadradinhos do Opera Speed Dial e até mesmo Google TV. Segue uma listinha básica 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

Parece muita coisa, mas raramente você vai precisar utilizar todos estes tamanhos. Isto vai variar de acordo com as necessidades do público alvo de cada projeto, que incluem navegador, aparelho e sistema operacional mais utilizados. Minha recomendação é incluir ao menos o clássico de 16px, uma versão HD de 32px e os touch icons para iOS. Segundo estatísticas 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ógica criar um tile para o Windows 8 também é uma boa prática, já que as opções de interação se estendem além do navegador.

Como implementar um favicon

Esta é simples. Basta deixar um arquivo de nome favicon.ico na pasta raíz do servidor. Certo?

Sim e não. Isto funcionaria bem para apenas um arquivo… Mas se você deseja trabalhar com múltiplos tamanhos e formatos vai ser necessário declarar no HTML. Vamos supor que temos um arquivo favicon.png dentro de uma pasta chamada IMG.

Antigamente você provavelmente faria isto da seguinte maneira:

<link rel="icon" type="image/png" href="img/favicon.png" />

Como somos bacanas e utilizamos HTML5 as coisas ficam mais simples:

<link rel="icon" href="img/favicon.png" />

Okay. Isto funciona para a maior parte dos browsers inteligentes. Falta o fallback para o IE…

Aviso mega Importante! Não cometa o erro de declarar o png E o ico sem comentários condicionais. Sério. Isto da problemas. Cada navegador possui a sua lógica. Uns vão ler o primeiro que você declarar, outros o último, alguns escolhem aleatoriamente… Sério! Caos!

Poderíamos fazer o fallback através de comentários condicionais:

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

Poderíamos… mas para a Microsoft não basta atrapalhar a vida dos desenvolvedores com os problemas dos navegadores antigos. Ela gosta de criar novos problemas! O IE10 não suporta comentários condicionais. É isto mesmo. A salvação mágica para aquelas longas noites insones desenvolvendo não funciona mais. Pode esquecer. Ah, e não sei se você deu uma espiadinha na tabela lá em cima, mas também não suportam PNG. Legal, né? Bem, são estas pequenas coisas que fazem a vida de um desenvolvedor web preocupado com acessibilidade e experiência do usuário um pouco como resolver quebra cabeças… Uma solução possível seria declarar apenas o arquivo em PNG e manter o ICO na raíz.

<link rel="icon" href="img/favicon.png" />

Se você desejar incluir diversos tamanhos, basta declarar cada um deles.

<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">

Apple Touch Icons

No caso de dispositivos que utilizam o sistema iOS (iPhone, iPod e iPad) existe a opção de fixar qualquer site como um favorito diretamente na tela de inicio, independente da existência de uma versão mobile ou design responsivo. Por padrão uma thumbnail é gerada automaticamente a partir de uma screenshot da página, mas o resultado é não apenas visualmente confuso como nada prático do ponto de vista da rápida identificação em meio a tantos outros ícones… Muitas vezes o usuário pode até resolver desafixar o seu site dali por que deixou a tela “feia”. Criar uma imagem exclusiva, chamada apple touch icon, é portanto uma boa prática de usabilidade.

Para isto basta criar 4 imagem quadradas com os cantos retos em formato png nos tamanhos 57px, 72px, 114px e 144px. Este template de photoshop  quebra um galho nesta hora.

Depois é só nomear os arquivos com o prefixo “apple-touch-icon” e colocar na raíz do diretório. A vantagem disto é que você economiza algumas linhas de código, mas em alguns casos como em um tema para tumblr, por exemplo, não temos acesso a pasta raiz. Nestas horas é importante declarar o caminho no HTML. Outra vantagem em apontar o caminho do ícone no código é a acessibilidade. Não importa se o seu usuário é fanboy da Apple ou não. Quando devidamente apontados, os touch icons também são utilizados pelo Android (a partir da versão 2.2) e em alguns outros aplicativos como o Reeder para iPad.

Bem, prepare seus icones e cole isto aqui entre as tags head do seu HTML e seja feliz:

<!-- iPad com Retina Display -->
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<!-- iPhone com Retina Display -->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<!-- Primeira e segunda geração de iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<!-- Versões antigas de iPhone, iPod Touch e Android 2.2+  -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Você pode notar que estou declarando as imagens da maior para a menor. Esta é uma boa prática que garante que versões mais antigas do iOS baixem o arquivo de menor tamanho, já que o atributo sizes só foi implantado a partir do iOS 4. Nas versões anteriores por padrão o sistema escolhe a última imagem determinada. Ou seja, é uma questão de progressive enhancement, pois não faz sentido o usuário baixar uma imagem mais pesada em uma tela de resolução mais baixa.

Por padrão 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ê não quiser o reflexo basta utilizar o sufixo “precomposed” no nome do seu arquivo.

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Se você for preguiçoso e só tiver tempo para criar um ícone faça o de 144px que ele será redimensionado automaticamente. Só tenha em mente que a imagem pode perder a qualidade e você estará forçando o usuário a gastar mais banda do que necessário…

Atualização – iOS7

Com a implantação do iOS7 ocorreram algumas modificações no formato Apple Touch Icon. A primeira é com relação ao layout: a Apple retirou os efeitos de gel e transparência a lá web 2.0 (já foi tarde!), portanto não existem mais as versões “pre-composed”. Mas a mudança mais significativa ocorreu no tamanho: todos os ícones para iOS7 estão 5% maiores.

Seguem os três novos tamanhos:
iPhone / iPod touch retina – 120px
iPad 2 / iPad mini – 76px
iPad retina – 152px

Como o iOS7 não é compatível com versões do iPhone pré-retina (iPhone 3GS e anterior) não existe um novo formato para ele. Portanto, é recomendável incluir ainda uma versão de 57px para estes aparelhos mais antigos que não tem a possibilidade de atualizar.

As meta-tags ficariam assim:

<!-- iPad iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<!-- iPhone iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<!-- iPad iOS7+ sem retina display e iPad Mini-->
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<!-- iPhone iOS7-, iPod Touch e Android 2.2+  -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Se você for um fanático e quiser garantir a absoluta compatibilidade com todos os aparelhos vai precisar incluir todas as versões antigas de ícones. O código neste caso seria:

<!-- iPad iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<!-- iPad iOS7- com Retina Display -->
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<!-- iPhone iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<!-- iPhone iOS7- com Retina Display -->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<!-- iPad iOS7+ sem retina display e iPad Mini-->
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<!-- iPad iOS7- sem retina display  -->
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<!-- iPhone iOS7-, iPod Touch e Android 2.2+  -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Windows 8 Tiles

Se um usuário gostou o suficiente do seu site para querer guarda-lo entre os seus favoritos um ícone deve ser um convite implicito para que ele possa voltar a visita-lo novamente. Se este convite é grande, colorido e uma presença constante na área de trabalho a probabilidade dele retornar é maior ainda, certo?

É o que acontece no Windows 8. Aqueles blocos coloridos de aplicativos da interface Metro, chamados Tiles também podem ser utilizados para salvar favoritos.

O padrão do Windows 8 é utilizar um favicon ou o ícone do próprio Internet Explorer quando um site é fixado como favoritos na tela inicial. Não é preciso ser um gênio do design para deduzir que se aproveitarmos melhor a área disponível – 144px quadrados – o resultado seria muito mais bacana.

Para criar uma image tile para o seu site basta utilizar um PNG quadrado de 144px por 144 pixels. O recomendável é utilizar um fundo de arquivo transparente, já que o Windows escolhe automaticamente a cor do fundo com base no tom dominante do seu ícone. É possível ainda escolher a cor do fundo do tile no próprio código HTML através de valores hexadecimais ou rgb. Depois é só apontar o caminho da imagem da seguinte forma:

<meta name="msapplication-TileImage" content="img/tile.png"/>
<meta name="msapplication-TileColor" content="#FF0000"/>

Esta imagem só é baixada no momento que o usuário fixa o site como favorito, então não existe nenhum custo de banda adicional.

Existem ainda mais alguns opções avançadas de uso. É possível, por exemplo, criar um arquivo XML que atualiza periodicamente este tile com informações do site. É ótimo para mostrar os últimos posts de um blog, novas promoções de uma loja ou número de mensagens não lidas de uma rede social, por exemplo. Isto significa que o usuário receberá notificações de atualização sem ao menos precisar entrar no site. É possível retornar um valor numérico entre 1 e 99 e ainda mostrar alguns símbolos específicos chamados de glyph badges. A lista de símbolos disponívels inclui um ícones de mensagem, alerta, atenção, erro, etc. Este tutorial ensina como criar o XML

É possível – na verdade desde o Windows 7 – ainda criar uma lista de links internos escolhidas pelo desenvolvedor  ou gerada dinamicamente através da interação do usuário para que ele visite diretamente através da tile.

Conclusão

As vezes são os detalhes que fazem toda a diferença. Criar um ícone projetado especificamente para melhor atender cada situação pode dar um pouquinho a mais de trabalho, mas certamente garante uma melhor integração entre o site o usuário final e, consequentemente, uma divulgação maior da marca. Quem fizer o esforço a mais certamente será ganhará destaque na barra de favoritos, home screen ou área de trabalho, ganhando assim mais visitas e o principal – clientes e usuários mais felizes.

Leia mais

Understand the Favicon
Create perfect favicon
The icon handbook
Touch Icons
Pinned sites in windows 8

Por Dani Guerrato

Uma geek de 27 anos apaixonada por cinema, literatura, tecnologia e, é claro, internet! É designer, desenvolvedora front-end e co-fundadora do estúdio PopUp Design, localizado em São Paulo. Adora semântica e acha divertido ler o código fonte do site dos outros.

http://blog.popupdesign.com.br

Mais posts do autor

Comentários (37)

  • http://twitter.com/rafagaseo Ráfaga Gianesini

    Muita coisa nova, desde história, teorias, e a prática. Realmente completo, ótimo artigo.

  • Thiago Alvernaz

    Ótima matéria a equipe do Tableless está de parabéns se preocupa até com pequenos detalhes de um criação, agora fiquei só com uma curiosidade por que o Tableless não em favicon?

  • http://www.facebook.com/dougmiguel Douglas Miguel

    Artigo excelente, parabéns!

  • Jorge Ramos

    artigo muito bom, obrigado pela colaboração.

  • Gabriel Sepulveda Meneses

    Excelente!

  • José

    Exato! haha Vejo muitos sites assim: falam, falam e no próprio site não aplica o que é proposto no artigo. O favicon de vocês está com 404. E digo que acesso o site e faz muito tempo que não me lembro de ter visto o favicon.

  • Allan Henrique

    Na realidade ao inserirmos o arquivo favicon.ico na raiz do servidor, automaticamente é inserido na barra de título.

    Excelente artigo, até então achava-o necessário, porém não sabia de sua essência.Conteúdo Rico.

  • Allan Henrique

    Uma dúvida, como é a pronuncia (CORRETA) de FAVICON?

  • http://www.popupdesign.com.br/ Dani Guerrato

    Sim, isto funciona para um único arquivo. Mas como no caso deste artigo estamos lidando com diversas formatos e tamanhos diferentes é necessário referenciar para o navegador saber qual arquivo você deseja utilizar.
    Um abraço!

  • http://www.popupdesign.com.br/ Dani Guerrato

    Oi Allan!
    Se você entende um pouquinho de fonética a pronúncia é /ˈfævɪkɒn/
    Como a expressão vem do inglês favorite + icon, a pronúnica se dá da mesma forma, ou seja, algo como “fêivi-aicom”.

  • http://twitter.com/rafagaseo Ráfaga Gianesini

    Casa de ferreiro espeto é de pau. Se for analisar é muita coisa pra se preocupar, quem sabe depois dese artigo eles mudam.

  • Bruno

    O “fêivi-aicom” aparece somente no no Chrome.

  • Bruno

    Ótimo artigo!
    Mas devo confessar que fiquei em dúvida (talvez por não ter interpretado corretamente) em uma parte:
    Você disse “Uma solução possível seria declarar apenas o arquivo em PNG e manter o ICO na raíz.”

    Você diz em fazer a chamada do PNG no HTML e “esquecer” do ICO na raiz?

  • http://www.popupdesign.com.br/ Dani Guerrato

    Oi Bruno! É isto mesmo. O Internet Explorer não é compatível com ícones no formato png e portanto leria o arquivo favicon.ico na pasta raíz do site, enquanto o restante dos browsers utilizaria o arquivo png referenciado no código HTML.
    Um abraço!

  • Mauro Silva

    Desculpa, mas segundo a transcrição fonética IPA que você colocou ( /ˈfævɪkɒn/ ), a pronúncia seria algo como “févicon”.
    Mas na realizada parece não haver consenso entre os falantes nativos de inglês. Uns falam “févicon”, enquanto outros dizem “feiváicon” ou ainda “fêivicon”.

  • http://www.facebook.com/raphael.jordany Raphael Jordany

    Excelente artigo, parabéns Dani.

  • http://twitter.com/jofelipe_ Jonathan Felipe

    Dani, nesta tag:

    Se o nome da imagem do favicon não tiver prefixo, ela não funciona?

  • Leandro Bassi Toninatto

    Na verdade o nome da imagem “apple-touch-icon-144×144.png” é apenas uma referência, já que os navegadores interpretam a tag sizes=”144×144″ e não o nome do arquivo.

  • http://twitter.com/jofelipe_ Jonathan Felipe

    Ah, beleza!

  • Pingback: Favicons | José Almy Web Designer

  • http://www.facebook.com/JohnLeao John Leão

    Muito bom o post. Valeu mesmo!

  • http://blog.marlonpacheco.com.br/ Marlon Pacheco

    Ótimo artigo. Neste momento estou desenvolvendo um tema para WordPress e já estou colocando essas dicas em prática. Eu lembrava que o IE implementava o favicon, mas isso na época que eu desenvolvia em ASP (perdão Odin) e não tinha me dado conta que depois que passei a usar o PNG, ele não aparecia no IE.
    Durante o desenvolvimento do tema, criei o ícone em vários tamanhos, mas já percebi que faltaram alguns. Então, mãos à obra.

  • Ricardo Borghetti

    Ótimas dicas! Obrigado por compartilhar o conhecimento :)

  • Clayton

    Parabéns pelo comentário! Bem especificado em tecnologias diferentes! Legal … nossa área, WebDesign, falta pessoas que realmente compartilhem “coisas” úteis! Mais uma vez, parabéns pela post!

  • Humberto

    Parabéns pela matéria Dani.
    “professional”

  • Qaiq Alves

    Bom, pode ser apenas porque a Dani é uma colaboradora e quem provavelmente cuida do design é o Diego Eis. Pode ser que ela, e sua agência, se preocupem e ele não.

  • Eric dos Reis

    Eu tentei implementar em um projeto meu utilizando essas técnicas, mas não obtive sucesso, isso será por causa que meu projeto está localhost?

  • Cristiano Amaro

    Oi Dani,
    Muito bacana seu artigo!
    Pode me ajudar?
    Não consigo fazer o favicon aparecer no ie nem com reza :( estranho que no ultimo site que publiquei utilizei o mesmo código e funciona perfeitamente…
    obrigado
    amaro_cristiano@hotmail.com

  • chico

    gostaria de excluir meu imail deste site

  • Glaucia Rezende

    amei.ico

  • Cornélio José Wiedemann

    pow cocotinha
    você tem o dom
    continue assim amour

  • Zé Máximo

    falando em favicon o favicon da tableless não aparece nos meus favoritos :D

  • Samuel Dos Santos

    Gostei. Começarei a trabalhar exatamente com os favicon dos meus projetos e o conteúdo aqui está rico em informações. Alguns erros de digitação, mas tudo bem, é muita coisa. :)

  • Marcelo Lynx

    Show Dani, vc destrói! sua dicas foram para os meus favicon.ico rs

  • denyswb

    Muito bom e útil o artigo. Parabéns.

  • Cezar Luiz

    Só para dúvidas, para Android, o correto é utilizar um ícone 152×152 png com a tag assim:

    Ele necessita desse precomposed. Obrigado.

  • www.thesimstg.com

    404 damm =(