favicon.png vs favicon.ico - por que devo usar PNG em vez de ICO?

442

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.

png favicon ico Jon Galloway
fonte

Respostas:

233

Resposta substituída (e transformada em Community Wiki) devido a inúmeras atualizações e notas de várias outras pessoas neste tópico:

  • ICOs e PNGs permitem transparência total baseada em canal alfa
  • O ICO permite compatibilidade com versões anteriores com navegadores mais antigos (por exemplo, IE6)
  • O PNG provavelmente possui um suporte mais amplo de ferramentas para transparência, mas você também pode encontrar ferramentas para criar ICOs de canal alfa, como a ferramenta Dynamic Drive e o plug-in do Photoshop mencionados pelo @mercator.

Sinta-se livre para consultar as outras respostas aqui para obter mais detalhes.

âmbar
fonte
78
A OIC também permite canal alfa
Álvaro González
58
-1 O ICO suporta várias resoluções, incluindo canal alfa completo. A propósito, o alfa de 1 bit é conhecido como "transparência". O único limite real que a OIC teve foi com ícones maiores ou iguais a 256 de comprimento (qualquer direção), embora já tenha sido superado várias vezes.
Christian
26
-1 .ico também permite várias resoluções em um arquivo (16x16 e 32x32, por exemplo). Portanto, o icone permanece bom quando você cria um atalho em uma área de trabalho.
precisa saber é o seguinte
4
A maioria dos navegadores prefere o favicon.ico na raiz ao invés do link. Com sua solução, a maioria dos navegadores selecionaria o .ico não transparente em vez do png vinculado.
Lode
@lode Por que escolheria um ico não transparente em vez de um ico transparente?
9788 Robb Grant
367

Todos os navegadores modernos (testados com Chrome 4, Firefox 3.5, IE8, Opera 10 e Safari 4) sempre solicitam um, a favicon.icomenos que você tenha especificado um ícone de atalho por <link>. Portanto, se você não especificar explicitamente um, é melhor sempre ter um favicon.icoarquivo, 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.icoarquivos 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.

mercator
fonte
6
Ótima dica desta ferramenta Dynamic Drive! Marcado instantaneamente. Obrigado!
Marcos Buarque
3
re ferramentas, é amplamente falso; Existem várias ferramentas de criação de ícones. Eu mesmo escrevi uma simples.
Christian
4
Para aqueles que não têm $ 650 dólares para o Photoshop, você pode usar pixlr.com (de graça) para criar, editar e salvar arquivos .png com camadas completa e transparência :)
Scott B
3
@Pacerier É incrivelmente difícil conseguir .icoedição no PS. E mesmo que você o faça, o resultado final é muito ruim, você pensaria que .bmpera um formato melhor (ele adiciona muitos metadados, tornando a reedição uma grande dor).
Christian
4
@mikevoermans: ainda é lido como PNG; os navegadores mais modernos não se importam muito com extensões de arquivo. BTW, esta é a melhor resposta e deve ser a aceita.
rvighne
48

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.

Wouter van Nifterick
fonte
16
O PNG também pode fornecer canal alfa
Álvaro González
10
sim, meu ponto era que da OIC pode fazer tudo o que PNG pode fazer (alfa-transparência) como um favicon, e além disso, eles são suportados por todos os navegadores desde o ano 0.
Wouter van Nifterick
de acordo com a wikipedia internet explorer falhará no suporte a uma linha como esta: <link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />
frankster
2
Provavelmente, o site não suporta navegadores desde o ano 0, então por que se preocupar? Tente carregar um site moderno no IE6 e veja o que acontece;)
Dominic
26

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.

Álvaro González
fonte
Relacionado a isso está o fato de que o IE9 usa também os grandes ícones para pin à win7 taskbar ver: stackoverflow.com/questions/3723715/...
GazB
Uhm, teórico? O mesmo ícone fornecido com o Windows 7 pode ser usado no Windows 95 no modo de cor 8 bits. Eu acho isso bastante prático, não?
Christian
Observe que esta resposta foi escrita em 2009. A cena do navegador na época era muito diferente da atual.
Álvaro González
15

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 .

pmoleri
fonte
3
Não é muito para sites? Espere até todo mundo começar a usar telas parecidas com retina; de repente, haverá uma razão muito boa porque se poderia incluir um tamanho 32x32 ou maior na sua favicon ...
Roman Starkov
1
Estamos falando de favicons assim a questão do apoio é na verdade o oposto do que você diz
David Heffernan
1
+1 Aborda a questão original e não fica atolada em transparência. Também menciona um aplicativo que faz suporte ao formato .ico.
kovacsbv
12

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.

jdavid.net
fonte
1
Não sei se é verdadeiro ou falso, mas foi o argumento decisivo para eu criar o favicon.ico na raiz, além do png que eu tenho.
Alexei Tenitski 18/10/12
2
Eu sei disso no trabalho em telly.com , -via paul lindner, que faz parte da equipe do google plus. plus.google.com/117259934788907243749/about
jdavid.net
Colocar o favicon na raiz é o padrão de fato , então eu o aderiria por razões como as mencionadas nesta resposta.
Stijn de Witt
8

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

Adria
fonte
3

Evite PNG em qualquer caso, se você quiser uma compatibilidade confiável com o IE6.

aehlke
fonte
19
Não há razão para que você não possa usar os dois - um ico na árvore de diretórios do IE6 e um PNG especificado por meio de um <link>no código da página para navegadores modernos.
27279 Amber
10
Por que você usaria os dois? Se você vai se incomodar em fazer um ico, que benefício teria também um png? Certamente é apenas trabalho extra e código extra.
Mr_Chimp
@ Mr_Chimp porque png é um padrão aberto e mais voltado para o futuro? É uma linha extra de marcação.
Wyatt8740
9
Oi @Orcra - Eu acho que você não acharia tão engraçado se você estivesse lendo isso ~ 8 anos atrás, quando escrevi esta resposta, e tivesse que considerar coisas como o IE6 :) StackOverflow permite editar respostas, então sinta-se à vontade para atualizá-lo para algo relevante hoje
aehlke
3
@aehike você tem um ponto justo, meu mau por não verificar o timestamp.
Orcra 24/02
0

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.

s3c
fonte