Além do fato de PNG ser um formato de imagem mais comum, existe algum motivo técnico para favorecer favicon.png vs. favicon.ico?
Apoio navegadores modernos, todos compatíveis com ícones favoritos em PNG.
Além do fato de PNG ser um formato de imagem mais comum, existe algum motivo técnico para favorecer favicon.png vs. favicon.ico?
Apoio navegadores modernos, todos compatíveis com ícones favoritos em PNG.
Respostas:
Resposta substituída (e transformada em Community Wiki) devido a inúmeras atualizações e notas de várias outras pessoas neste tópico:
Sinta-se livre para consultar as outras respostas aqui para obter mais detalhes.
Todos os navegadores modernos (testados com Chrome 4, Firefox 3.5, IE8, Opera 10 e Safari 4) sempre solicitam um, a favicon.ico
menos que você tenha especificado um ícone de atalho por <link>
. Portanto, se você não especificar explicitamente um, é melhor sempre ter um favicon.ico
arquivo, para evitar um 404. Yahoo! sugere que você o faça pequeno e armazenável em cache.
E você também não precisa usar um PNG apenas para a transparência alfa. Os arquivos ICO suportam a transparência alfa muito bem (por exemplo, cores de 32 bits), embora quase nenhuma ferramenta permita que você os crie. Uso regularmente o gerador FavIcon do Dynamic Drive para criar favicon.ico
arquivos com transparência alfa. É a única ferramenta online que conheço que pode fazê-lo.
Há também um plug-in gratuito do Photoshop que pode criá-los.
.ico
edição no PS. E mesmo que você o faça, o resultado final é muito ruim, você pensaria que .bmp
era um formato melhor (ele adiciona muitos metadados, tornando a reedição uma grande dor).
Os arquivos .png são bons, mas os arquivos .ico também fornecem transparência de canal alfa, além de oferecer compatibilidade com versões anteriores.
Veja o tipo que StackOverflow usa, por exemplo (observe que é transparente):
<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png">
A coisa apple-itouch é para usuários de iphone que fazem um atalho para um site.
A vantagem teórica dos arquivos * .ico é que eles são contêineres que podem conter mais de um ícone. Você poderia, por exemplo, armazenar uma imagem com canal alfa e uma versão de 16 cores para sistemas legados, ou adicionar ícones 32x32 e 48x48 (que apareceriam quando, por exemplo, arrastar um link para o Windows Explorer).
Essa boa idéia, no entanto, tende a colidir com as implementações do navegador.
O PNG tem 2 vantagens: possui tamanho menor e é mais amplamente usado e suportado (exceto nos casos favoritos). Como mencionado antes da ICO, pode ter vários ícones de tamanho, o que é útil para aplicativos de desktop, mas não muito para sites. Eu recomendo que você coloque um favicon.ico na raiz do seu aplicativo. Se você tiver acesso ao cabeçalho das páginas do site, use a tag para apontar para um arquivo png. Um navegador tão antigo mostrará o favicon.ico e os mais recentes o png.
Para criar arquivos PNG e ícones, eu recomendaria o Gimp .
Algumas ferramentas sociais como o Google+ usam um método simples para obter um favicon para links externos, buscando http://your.domainname.com/favicon.ico
Como eles não pré-buscam o conteúdo HTML, a <link>
tag não funcionará. Nesse caso, convém usar uma regra mod_rewrite ou simplesmente colocar o arquivo no local padrão.
Um ico pode ser um png.
Mais precisamente, você pode armazenar um ou mais png dentro desse formato mínimo de contêiner, em vez do bitmap + alfa usual que todos associam fortemente ao ico.
O suporte é antigo, aparecendo no Windows Vista (2007) e é bem suportado pelos navegadores, embora não necessariamente pelo software de edição de ícones.
Qualquer png válido (todo o cabeçalho, inclusive) pode ser anexado com um cabeçalho de 6 bytes e um diretório de imagens de 16 bytes.
O GIMP tem suporte nativo. Simplesmente exporte como ico e marque "Compressed (PNG)".
Evite PNG em qualquer caso, se você quiser uma compatibilidade confiável com o IE6.
<link>
no código da página para navegadores modernos.
Pelo que vale a pena, faço o seguinte:
<!-- Favicon - Generic -->
<link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
<link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
<link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
<link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
<link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
<link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
<link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
<!-- Favicon - Android -->
<link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
<!-- Favicon - iOS -->
<link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
<link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
<link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">
E ainda mantenho o favicon.ico na raiz.