Favicon como deve ser

Por RamonPage

POR MUITO TEMPO eu usei favicon.png, acreditando nas premissas de que ele suporta muitas cores e full alpha channel. Apesar da veracidade dessas premissas, recentemente eu parei para pensar sobre elas e decidi fazer um comparativo entre favicon.png e favicon.ico.

Antes de qualquer coisa, digo que estou voltando para o favicon.ico. Agora explicarei o porquê.

Nós não podemos negar, a Microsoft foi importantíssima para a evolução da computação pessoal que conhecemos hoje. E é bom lembrarmos disso quando pensamos no formato .ico. Ele foi introduzido na versão 1.0 do Windows, quando já se pensava nas interfaces com cliques de mouse.

De lá pra cá o formato .ico se difundiu e foi padronizado também para a internet, através do famigerado favicon.ico. Era final da década de 90 quando a W3C adicionou o arquivo na especificação do HTML 4.01.

Ou seja, deste então o favicon.ico começou a ser totalmente suportado pela maioria dos navegadores, incluindo o Internet Explorer (era de se esperar) a partir da sua versão 5.

Desculpe dizer, favicon.png é desnecessário!

Razão n. 1

Dizer que favicon.ico não suporta alpha-channel é uma inverdade, o problema é que na maioria das vezes nós usamos as ferramentas incorretas para gerar o arquivo. Atualmente estou usando o Icon Slate para gerar meus ícones e ele dá conta do recado.

Razão n. 2

Alguns navegadores estão preparados para ler o arquivo favicon.ico quando este estiver na raiz do projeto, mesmo que ele não seja explicitado na marcação das páginas via <link rel='shortcut icon' href='/favicon.ico' />.

Por falar nisso, é comum ver por aí desenvolvedores colocando os dois arquivos (favicon.ico e favicon.png) em conjunto, na esperança de atender melhor o suporte aos ícones. O favicon.png serviria para que os navegadores que tenham o devido suporte leiam o ícone de melhor qualidade (melhor qualidade?) por último.

    <link rel='shortcut icon' href='/favicon.ico' />
    <link rel='shortcut icon' href='/favicon.png' />

Isso é completamente desnecessário!

Razão n. 3

Recentemente eu recriei o favicon deste site, agora com suporte a telas retina. Sim, com favicon.ico é possível fazer isso, já com favicon.png ainda não.

Favicon em retina displays

Por padrão o formato .ico suporta várias dimensões de ícone em um único arquivo. Quem já fez ícones para Windows sabe disso. As dimensões são de 16x16, 24x24, 32x32, chegando até 256x256 pixels.

A partir deste suporte fica fácil criar favicons para telas retina. Basta gerar o favicon.ico com as dimensões 16x16px e 32x32px num único arquivo.1

1 — Cheguei a este resultado através do artigo de John Gruber How to Create Retina-Caliber Favicons

Visualizando arquivo favicon.ico com duas dimensões de ícone.
Duas dimensões de ícone num único arquivo

Com o aplicativo que citei acima (Icon Slate) é possível gerar estes ícones com várias dimensões.

Por fim, a minha conclusão atual é: favicon.png não mais.

Marcado em:

* * *